日期:2014-05-20  浏览次数:20814 次

一个js的mouseover问题。是关于鼠标移上去显示div,然后切换屏幕,回来后不显示div
打开本身页面,再开一个浏览器
鼠标移到a上面   
Alt+Tab
把鼠标往右移
Alt+Tab
现在效果:鼠标不在a上面但b仍打开
问:如何做到当鼠标不在a上面时b隐藏
 

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

<html xmlns="http://www.w3.org/1999/xhtml">
<head>
    <title>如何实现切换过来后自动判断b div是否显示</title>
    <script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.5.1/jquery.min.js"></script>
    <script type="text/javascript">
        $(document).ready(function(){
            $("#a").hover(function(){
                $("#b").show();
            },function(){
                $("#b").hide();
            });
        });
    </script>
</head>
<body>
    
<div id="a" style="background-color:Red; width:100px; height:100px; "></div>    
<div id="b" style="background-color:Blue; width:100px; height:100px; display:none "></div>

<br />
打开本身页面,再开一个浏览器<br />
鼠标移到a上面  <br />
Alt+Tab<br />
把鼠标往右移<br />
Alt+Tab<br />
现在效果:鼠标不在a上面但b仍打开,<br />
问:如何做到当鼠标不在a上面时b隐藏

</body>
</html>


------解决方案--------------------
把hover事件改成mouseover和mouseout就可以了。

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


hover的out和mouseout方法的区别就是hover会伴随着对鼠标是否仍然处在特定元素中的检测(例如,处在div中的图像),如果是,则会继续保持“悬停”状态,而不触发移出事件(修正了使用mouseout事件的一个常见错误)。



------解决方案--------------------

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

<html xmlns="http://www.w3.org/1999/xhtml">
<head>
    <title>如何实现切换过来后自动判断b div是否显示</title>
    <script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.5.1/jquery.min.js"></script>
    <script type="text/javascript">
        $(document).ready(function(){
            $("#a").mouseenter(function(){
                $("#b").show();