学做网站培训课程介绍

当前位置:

如何实现鼠标经过显示DIV,离开隐藏DIV

鼠标经过显示DIV,移开隐藏DIV,这在制作网站二级导航菜单时,经常用到。它的原理就是当鼠标经过时触发“显示”事件,鼠标离开时触发“隐藏”事件。这样的功能需要借助JQUERY。

下面学做网站论坛来讲一下如何实现鼠标经过显示DIV,离开隐藏DIV功能。【如果你对代码一点不懂,可以学习一下html入门教程

方法/步骤

  1. 给鼠标经过的DIV添加一个类 ,类名为submeau;如下图:
    sub01
  2. 给显示或者隐藏的DIV,添加一个ID,ID名为:id="oa_submeau",如下图:
    sub02
  3. 将以下的JQUERY代码放在整个网页的特别底部,用于控制鼠标经过显示DIV,离开隐藏DIV。
    
    
    <script src="http://apps.bdimg.com/libs/jquery/2.1.4/jquery.min.js"></script>
    <script type="text/javascript">
            $("#oa_submeau").hide();
                $(".submeau").hover(function () {
                    $("#oa_submeau").show();
                }, function () {
                    $("#oa_submeau").hide();
                })
                // 鼠标移动到list的div上的时候list div不会被隐藏
                $("#oa_submeau").hover(function () {
                    $("#oa_submeau").show();
                }, function () {
                    $("#oa_submeau").hide();
                })

        </script>

这样就可以实现鼠标经过某个区域时显示隐藏的DIV,离开时再次隐藏DIV。【为避免新手学建网站不懂代码,这里提示了示例代码下载:https://pan.baidu.com/s/1yOT_-TXvRarWhoqv064I0w】

除了使用以上的方法来实际这样的功能之外,还可以使用JQUERY来实现类似的功能。方法见:jquery实现点击按钮显示和隐藏内容

发表评论

您的电子邮箱地址不会被公开。 必填项已用*标注

相关教程

  • 大家都知道Linux主机实现301重定向相对较简单,如果你使用的是Linux主机,那么在设置固定连接的时候,wordpress后台会自动添加以下函数到.htaccess文
  • 什么是301重定向301重定向最简单的理解就是,假设你的主机上绑定有 www.xuewangzhan.com, xuewangzhan.com二个域名,当你想输入 xuewangzhan.com域
  • DW鼠标经过更换图片变化 视频教程 (1154324 次浏览)
    dreamweaver鼠标经过更换图片特效就是当鼠标经过图像就是当鼠标经过图像时,原图像会变成另外一张图像。鼠标经过图像其实是由两张图像组成的:原始
  • 鼠标经过时TAB菜单切换javascript特效介绍一些大型门户网站(新浪,腾讯,163等)中有很多的栏目,每个网站栏目下有很多的文章,在网站首页会将几个
  • 在我们学做网站的过程中,通过图片的后缀名我们很轻松的了解图片是什么格式的,想要替换的时候,很就简单了。但有的同学的电脑里的图片等文件并没
  • 通过wordpress程序自己做网站时,如果想在网站上显示每片文章的浏览量,一般都会使用wordpress浏览量插件,它可以方便的统计我们网站的每篇文章的浏览
  • CSS如何调整DIV顶部边距 图文教程 (126325 次浏览)
    作者: wenmp424Email: 1871663623@qq.com详细内容:想把网站LOGO往下调,同时把导航往上调,跟背景图对齐,里面那一句是添加上边距的呢,该怎
  • CSS控制DIV外边距 内边距 视频教程 (112983 次浏览)
    欢迎大家学习学做网站论坛的CSS视频教程,这节课程我们讲一下CSS控制DIV外边距 内边距。做网站时,可以通过CSS来设置一个DIV与其它DIV之间的边距,
  • 鼠标经过显示DIV,移开隐藏DIV,这在制作网站二级导航菜单时,经常用到。它的原理就是当鼠标经过时触发“显示”事件,鼠标离开时触发“隐藏”事件。这样的
  • 建网站时,我们可以在网站图片、视频上放一个DIV,DIV里放上自己网站的广告。然后用JS来控制这个广告DIV层几秒后自动隐藏消失。下面分享一下控制D