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.
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
Code:
<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>
Answer
Instead of hacking at it with JavaScript, you can accomplish this with CSS. This holds performance as well as semantic & logical advantages.
You have to change your HTML structure a little though. I'll assume the summaries are for books.
HTML
<div class="book">
<p class="short">Short summary.</p>
<p class="long">Long summary.</p>
</div>
CSS
.book .long,
.book:hover .short { display:none }
.book:hover .long { display:block }
Hope this helps.