jquerymouseout

hide div when mouseout

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>
Solution

  • try this 

    <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>​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​