一个js的mouseover有关问题。是关于鼠标移下去显示div,然后切换屏幕,回来后不显示div
一个js的mouseover问题。是关于鼠标移上去显示div,然后切换屏幕,回来后不显示div
打开本身页面,再开一个浏览器
鼠标移到a上面
Alt+Tab
把鼠标往右移
Alt+Tab
现在效果:鼠标不在a上面但b仍打开
问:如何做到当鼠标不在a上面时b隐藏
------解决方案--------------------
把hover事件改成mouseover和mouseout就可以了。
hover的out和mouseout方法的区别就是hover会伴随着对鼠标是否仍然处在特定元素中的检测(例如,处在div中的图像),如果是,则会继续保持“悬停”状态,而不触发移出事件(修正了使用mouseout事件的一个常见错误)。
------解决方案--------------------
打开本身页面,再开一个浏览器
鼠标移到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();