学做网站培训课程介绍

当前位置:

如何实现鼠标经过显示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鼠标经过更换图片变化 视频教程 (1156339 次浏览)
    dreamweaver鼠标经过更换图片特效就是当鼠标经过图像就是当鼠标经过图像时,原图像会变成另外一张图像。鼠标经过图像其实是由两张图像组成的:原始
  • 鼠标经过时TAB菜单切换javascript特效介绍一些大型门户网站(新浪,腾讯,163等)中有很多的栏目,每个网站栏目下有很多的文章,在网站首页会将几个
  • 静态网页不显示图片 (119350 次浏览)
    作者: 脉动Email: 511039684@qq.com详细内容:今天听了老师讲的课程第九节:什么是网站静态页面,然后自己就动手去照着做,文字什么的都可以显
  • 在我们学做网站的过程中,通过图片的后缀名我们很轻松的了解图片是什么格式的,想要替换的时候,很就简单了。但有的同学的电脑里的图片等文件并没
  • 什么是DIV+CSS 附件下载 (1155075 次浏览)
    本节建站课程高清视频下载链接: https://pan.baidu.com/s/1sl6nR8D 密码: urwgdiv+css就是把设计师设计好的图片,转变成一张静态页面的技术。html
  • 在网站布局过程中,运用div+css的布局是特别有利的,通常我们需要对一个div层进行居中处理,那么如何通过css属性对它进行控制呢:下面分享一个建网页
  • 鼠标经过显示DIV,移开隐藏DIV,这在制作网站二级导航菜单时,经常用到。它的原理就是当鼠标经过时触发“显示”事件,鼠标离开时触发“隐藏”事件。这样的
  • 切片的图层显示与隐藏 图文教程 (110425 次浏览)
    在学习ps切片教程中,参考线、网格、目标路径、选区边缘、切片、文本边界、文本基线和文本选区都是不会打印出来的额外内容,要显示他们,需要在菜单栏