用Jquery切换div使其保持可见

Question

I have this jquery code:

http://jsfiddle.net/y8wPw/60/

All I want is that after DIV with content opens, it must stay visible, so that I can go over it and use this div as a form( or some other purpose). But now, if I make a MOUSEOUT from Content div , it disappears.

Jquery code:

$(document).ready(function() {
    $(".body").hover(function () {
        $(".desc").toggle();
    })
})

Answer 1

$(document).ready(function() {
$(".body").hover(function () {
    $(".desc").show();
})

})

Answer 2

Why not try:

$(document).ready(function() {
    $(".body").hover(function () {
        $(".desc").show();
    })
})

Answer 3

I have edited your js fiddle code by adding a wrapper and assigning the event to it. I guess that fixes you problem :)

updated the html to

<div id="wrap">
<div class="body">Hellp</div>
<div class="desc">Any content here!</div>
</div>
<div class="clear"></div>

updated the css

#wrap{overflow:hidden}

updated the js

$(document).ready(function() {
    $("#wrap").hover(function () {
        $(".desc").toggle();
    })
})

The link http://jsfiddle.net/RUtgE/1/

Answer 4

Use .css('display', 'block') instead of .toggle()

JSFiddle

Answer 5

You can use mouseenter instead of hover. In this case it will show the first time you go over the "help" button, the next time it will close again.

Check out http://api.jquery.com/category/events/mouse-events/ for more mouse events to play with!

Answer 6

$(document).ready(function() {
    $(".body").hover(function () {
        $(".desc").show();
    })
    $(".close").click(function () {
        $(".desc").hide();
    })
    $(".wrap").mouseleave(function () {
        $(".desc").hide();
    })
})

http://jsfiddle.net/y8wPw/74/

This is what i was looking for! With some of your help i managed to make it!

Thanks to all!