hide div when mouseout

Question

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

Answer 1

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

Answer 2

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

Answer 3

This is simple with jquery native function mouseleave

Answer 4

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.

Answer 5

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");

    });
});​