当鼠标移出时隐藏div [英] hide div when mouseout
本文介绍了当鼠标移出时隐藏div的处理方法，对大家解决问题具有一定的参考价值，需要的朋友们下面随着小编来一起学习吧！
问题描述
我有两个div，一个用于简短摘要，一个用于长摘要.
当我在简短摘要上鼠标悬停"时，简短摘要会消失，而长摘要会出现.
当我从长摘要中暂停"时，它应该消失，而短摘要应出现.
I have two div's, one for short summary and one for long summary.
When I "mouseover" on the short summary, the short summary disappears and the long summary appears.
When I "mouseout" from long summary it should disappear and the short summary should appear.
问题是，当我仍在长摘要的边界内但不在排序摘要的位置时，发生mouseout事件
The problem is that when I am still inside the border of long summary but out of the place sort summary was, the mouseout event occurs
代码:
<head>
<script type="text/javascript" src="http://ajax.aspnetcdn.com/ajax/jQuery/jquery-1.8.2.js"></script>
<script>
function show(Fdiv) {
$(Fdiv).css("display", "none");
$(Fdiv).next().css("display", "inline");
}
function hide(Sdiv) {
$(Sdiv).css("display", "none");
$(Sdiv).prev().css("display", "inline");
}
</script>
</head>
<body>
<div onmouseover="show(this)"> Sort summary <br /> Second Row</div>
<div onmouseout="hide(this)" style="display:none"> Long Summary <br /> Second Row<br /> Third Row <br /> Fourth Row</div>
</body>
</html>
推荐答案
尝试一下
<div onmouseover="show_div(this)"> Sort summary <br /> Second Row</div>
<div onmouseout="hide_div(this)" style="display:none"> Long Summary <br />
Second Row<br /> Third Row <br /> Fourth Row</div>
<script>
function show_div(Fdiv) {
$(Fdiv).hide();
$(Fdiv).next().show();
}
function hide_div(Sdiv) {
$(Sdiv).hide();
$(Sdiv).prev().show();
}
</script>
这篇关于当鼠标移出时隐藏div的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！
查看全文
