鼠标的移出和移入

     现在很多网页在index页面的登录框里都设置了鼠标事件，例如：当鼠标移动到登录的div时就显示个人信息，当鼠标移出时就隐藏个人信息。新手的我用DOM写了几行鼠标事件的代码。其中遇到了很多问题，然而通过百度都得到了解决，借此记录一下。

思路

鼠标移动到frr类上就让usermessage类的display="block"，直到鼠标移出这两个类后usermessage这类才隐藏

<div class="personal">
                   <div class="frr">
                       <p class="topPclass">Wedwdwefwefwefwefwe<img  class="fr" src="assist/image/top_down.png"></p>
                       <img class="de" width="20" height="20" src="assist/image/default_big_14.png">
                   </div>
                   <div class="usermessage"  style="display: none">
                       <img width="70" height="70" src="assist/image/default_big_14.png">
                       <h2>alienscscscscuouo</h2>
                       <p>哈哈哈哈hahahahahahah</p>
                       <div class="topBtn">
                           <a class="topBtnL" href="#" type="button">个人中心</a>
                           <a class="topBtnR" href="#" type="button">退出</a>
                       </div>
                   </div>
               </div>

下面是我是用DOM写的：

function pre() {
    var frrClass = document.getElementsByClassName("frr");
    var  userClass = document.getElementsByClassName("usermessage");
        frrClass[0].onmousemove = function () {
            userClass[0].style.display="block"
        }
        frrClass[0].onmouseout = function () {
            userClass[0].style.display="none"
        }

    userClass[0].οnmοusemοve=function () {
        userClass[0].style.display="block"
    }
    userClass[0].οnmοuseοut=function () {
        userClass[0].style.display="none"
    }
};

我觉得这代码很繁琐，所以我百度了一下，原来可以用jquery写出更短的代码

下面是用jquery写的

$('.personal').hover(function(){
    $('.usermessage').stop(true).show();
},function(){
    $('.usermessage').stop(true).hide();
});

好吧。。。。四行代码就能代替我自己写的DOM方法。。。。jquery确实挺强大的。

遇到的困难：

1.我本一开始用DOM只对frr类设置鼠标事件，然而当鼠标下移出frr类后usermessage也隐藏。

解决方法：

连同自己显示的这个usermessage这类也给它绑定两个鼠标事件，将它们的display的属性得到相应的改变。