使用mouseover()与mouseout()使鼠标覆盖后可以显示新的html元素

最新推荐文章于 2021-12-29 14:01:10 发布

bobbyzyl12

最新推荐文章于 2021-12-29 14:01:10 发布

阅读量3.4k

点赞数

CC 4.0 BY-SA版权

分类专栏： JS 文章标签： jquery

本文链接：https://blog.youkuaiyun.com/bobbyzyl12/article/details/52204771

JS 专栏收录该内容

3 篇文章

订阅专栏

本文介绍了如何使用jQuery的mouseover()和mouseout()事件来实现在鼠标覆盖时显示新的HTML元素功能。通过逐步的demo解析，展示了从导入jQuery库，创建测试元素，到编写JavaScript代码实现鼠标移入显示、移出隐藏的效果，以及考虑鼠标从源元素移至目标元素时保持显示状态的优化。此外，还提到这种方法可以应用于更复杂的交互设计，如元素放大和显示详细信息等。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

功能预览

很多时候我们在各类网站上都能看到鼠标移到某个位置上的时候会扩展出新的div或者其他html元素。

解决方案介绍

首先，单纯的使用CSS中的hover看上去很难实现，所以使用juqery的mouseover()和mouseout()就很好实现啦！

demo逐步

【step 1】因为是使用jquery的方法，所以不要忘记导入jquery。

    <script src="http://apps.bdimg.com/libs/jquery/2.1.1/jquery.min.js"></script>

【step 2】在body里写两个div用于测试（id分别是a和b，一个红色一个黑色，宽高分别是300px）

    <div style="background-color:red;width:300px;height:300px;" id="a"></div>
    <div style="background-color:black;width:300px;height:300px;" id="b"></div>

【step 3】js编写
1)在一开始先hide掉需要弹出的元素

            $(function(){
                  $("#b").hide();
            });

2)一旦移动到a上后就显示b，同时一旦移开了a就再隐藏b

$("#a").mouseover(function(){ $("#b").show();});

$("#a").mouseout(function(){$("#b").hide();});

3)此处添加一下，如果鼠标从a离开但是在b上，还是继续显示b的效果

        $("#b").mouseover(function(){
                 $("#b").show();
             });

         $("#b").mouseout(function(){
             $("#b").hide(); 
      });

完整代码

html

<head>
    ...
    <script src="http://apps.bdimg.com/libs/jquery/2.1.1/jquery.min.js"></script>
    ...
</head>
<body>
    <div style="background-color:red;width:300px;height:300px;" id="a"></div>
    <div style="background-color:black;width:300px;height:300px;" id="b"></div>
</body>

javascript

    $(function(){$("#b").hide();});

    $("#a").mouseover(function(){$("#b").show();});
    $("#a").mouseout(function(){$("#b").hide();});

    $("#b").mouseover(function(){$("#b").show();});
    $("#b").mouseout(function(){$("#b").hide();});