2017/9/1前端小白的总结：关于hover的一个故事

闲来无聊，突发奇想，故来玩玩博客，也没什么好写的，就写一个long long ago自学前端时候遇到的一个小问题吧。

用jquery实现：当鼠标移入一个元素，显示一个框（可以是下拉框什么的）， 可以对该元素和框的父元素上绑定事件。比如说：

html代码如下：

<li class="dropdown" id="personalLi">
    <div class="personal">点我下拉</div>
    <ul class="personMenu" style="display: none;">
        <li id="personalInfo"><a>信息维护</a></li>
        <li id="personalPwd"><a>密码修改</a></li>
        <li id=""><a>系统注销</a></li>
    </ul>
</li>

js代码如下：

$('#personalLi').hover(function () {
    var $ul=$(this).children().eq(1);
    if($ul.is(':hidden')){
        $ul.show();
    }else{
        $ul.hide();
    }
});

想想自己刚开始的思路真是醉不行。对class为personal的div绑定hover事件，当鼠标移入div时，ul出现了。

但是你想对ul里的li做什么事情的时候，就不行了，一离开div，ul就会消失的呀!

然后我就在那里想对div和ul两个元素上都绑定hover事件，这样总可以了吧！
代码是这么写的:

 $('.personal, .personMenu').hover(function () {
    var $ul=$(this).children().eq(1);
     if($ul.is(':hidden')){
         $ul.show();
     }else{
         $ul.hide();
     }
 });

然而………………事与愿违! 具体什么情况大家可以自己演示。

---

划重点，划重点！以后碰到这种尴尬的情况，你就

对他们的父亲操作就ok啦 。

---