CODEWITHSUNDEEP
javascripthoverjquery
user1978483
user1978483

Reputation: 89

After toggling div with Jquery make it stay visible

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();
    })
})

Upvotes: 1

Views: 1342

Answers (6)

user1978483
user1978483

Reputation: 89

$(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!

Upvotes: 0

amit1310
amit1310

Reputation: 9185

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/

Upvotes: 1

Rogier
Rogier

Reputation: 346

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!

Upvotes: 0

Amar
Amar

Reputation: 363

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

})

Upvotes: 2

Ofir Farchy
Ofir Farchy

Reputation: 8037

Why not try: 

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

Upvotes: 1

sohel khalifa
sohel khalifa

Reputation: 5578

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

JSFiddle

Upvotes: 0

Related Questions