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

功能预览

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

---

解决方案介绍

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

---

demo逐步

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

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

【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

    ...
    
    ...


    

    

javascript

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

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

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

---

扩展

mouseover()与mouseout()方法不仅可以用来实现显示新的元素，还可以用来实现很多其他的相对于css中直接改变元素的复杂的交互效果。
比如移动到一个元素上后该元素放大并显示一个新的div，其中包含其详细信息等等。