CODEWITHSUNDEEP
javascriptjquery
olo
olo

Reputation: 5271

jQuery hover fadein/fadeout/slidetoggle

When I onhover I can get the effect what I need, but when I move the mouse to "my list" a tag, #bb div disappeared. how could I make it stays there as I need to click it.

HTML:

<div id="aa">click</div>
<div id="bb"> <a href="">my list</a></div>

jQuery:

$('#bb').hide();
$('#aa').hover(function(){
    $('#bb').slideToggle();
});

Online sample here - http://jsfiddle.net/9tjZK/

Upvotes: 1

Views: 338

Answers (4)

dreamweiver
dreamweiver

Reputation: 6002

olo, you can try using on click event than hover, this gives you the desired results.

you can check here http://jsfiddle.net/9tjZK/8/

Upvotes: 0

Eli
Eli

Reputation: 14827

Change your HTML to this:

<div id="wrapper">
    <div id="aa">click</div>
    <div id="bb"> <a href="">my list</a></div>
</div>

and jQuery code:

$('#bb').hide();

$("#wrapper").hover(
  function () {
    $('#bb').stop(true, true).slideDown();
  },
  function () {
    $('#bb').stop(true, true).fadeOut();
  }
);

Demo: http://jsfiddle.net/9tjZK/9/

Upvotes: 1

dsgriffin
dsgriffin

Reputation: 68596

Working jsFiddle here - http://jsfiddle.net/9tjZK/7/.

HTML:

<div id="container">
<div id="aa">click</div>
<div id="bb"> <a href="">my list</a></div>
</div>

jQuery:

$('#bb').hide();
$('#aa').mouseenter(function(){
    $('#bb').fadeIn();
});

$('#container').mouseleave(function(){
   $('#bb').fadeOut();
});

Upvotes: 0

adeneo
adeneo

Reputation: 318212

Change your HTML, so the anchor is inside the element where you bound the mouseenter/leave event :

<div id="aa">click
    <div id="bb"> 
        <a href="">my list</a>
    </div>
</div>

FIDDLE

Upvotes: 2

Related Questions