学做网站培训课程介绍

当前位置:

如何实现鼠标经过显示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实现点击按钮显示和隐藏内容

发表评论

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

相关教程

  • 提高网站的“回头客”,我们需要给注册会员提供一些特权,而对游客隐藏部分wordpress文章,因为有很多自己做网站vip学员问到,网站怎么实现游客隐藏、会
  • 请注意,这里说的文章分页,不是学做网站论坛以前说的wordpress分页插件进行网站分类目录分页,而是一篇文章如果文字过多,会造成网页篇幅过长,影响
  • DW鼠标经过更换图片变化 视频教程 (1154481 次浏览)
    dreamweaver鼠标经过更换图片特效就是当鼠标经过图像就是当鼠标经过图像时,原图像会变成另外一张图像。鼠标经过图像其实是由两张图像组成的:原始
  • 鼠标经过时TAB菜单切换javascript特效介绍一些大型门户网站(新浪,腾讯,163等)中有很多的栏目,每个网站栏目下有很多的文章,在网站首页会将几个
  • 在我们学做网站的过程中,通过图片的后缀名我们很轻松的了解图片是什么格式的,想要替换的时候,很就简单了。但有的同学的电脑里的图片等文件并没
  • 很多同学在模板制作的过程,都有图片调用不出来的现象,其实原因很简单,就是图片路径错误造成的。这里涉及到html和css中的一些路径知识,这个视
  • 在网站布局过程中,运用div+css的布局是特别有利的,通常我们需要对一个div层进行居中处理,那么如何通过css属性对它进行控制呢:下面分享一个建网页
  • 不是作业 但是找了下版块 不知道发那里 貌似只有这里特别合适。之所以决定自己写CSS 是由于看了建站课程里的DIV+CSS课程,为记忆CSS而作出的决定;另外
  • 鼠标经过显示DIV,移开隐藏DIV,这在制作网站二级导航菜单时,经常用到。它的原理就是当鼠标经过时触发“显示”事件,鼠标离开时触发“隐藏”事件。这样的
  • 切片的图层显示与隐藏 图文教程 (19791 次浏览)
    在学习ps切片教程中,参考线、网格、目标路径、选区边缘、切片、文本边界、文本基线和文本选区都是不会打印出来的额外内容,要显示他们,需要在菜单栏