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>

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>

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.

This is simple with jquery native function mouseleave

Try this Working demo: http://jsfiddle.net/UG3FZ/

This demo is using following APIs :

.mouseout- http://api.jquery.com/mouseover/

.mouseover - http://api.jquery.com/mouseout/

Since you are using JQ latest, if I may suggest read through the api jquery and few tips online.

Rest the demo should serve your needs :)

Code

$(function() {
    $(".show_div").mouseover(function() {
        $(this).next().show();
        $(this).hide("slow");
    });

    $(".hide_div").mouseout(function() {
        $(this).prev().show();
        $(this).hide("slow");

    });
});

Do this way:-

HTML:

<div class="main">
    <div class="short"> Short summary <br /> Second Row</div> 
    <div class="long" style="display:none"> Long Summary <br /> Second Row<br /> Third Row <br /> Fourth Row</div>
</div>

JQuery:

$(".main")
    .mouseenter(
        function() {
            $(this+".long").show();
            $(this+".short").hide();
        })
    .mouseleave(
        function() {
            $(this+".short").show();
            $(this+".long").hide();
        });

Refer LIVE DEMO

来源：https://stackoverflow.com/questions/13007550/hide-div-when-mouseout

标签

jquery

mouseout