零基础建站培训教程介绍

当前位置:

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

发表评论

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

相关教程

学做网站论坛零基础学建网站课程
速盈彩1分快三
琼是哪个省的简称 上海快三推荐三同号推荐 北京十一选五开奖结果bjlot 本期双色球蓝球胆码 qq欢乐斗地主外挂 彩票中奖2018 黑龙江快乐十分实时 彩票33 海南体彩环岛赛开奖 排三走势图彩经网 赌牛牛怎么玩 今日足球竞彩专家预测 什么软件赚钱最快 七星彩大乐透走势图带坐标走势图 吉林快三要出豹子