CODEWITHSUNDEEP
javascriptjqueryhtmldom
tokmak
tokmak

Reputation: 1509

fadeToggle next element in on hover

I have the following code to show the next element in the dom on click, I would like to convert this same code into something I could use for a simple hover event. Does jQuery have a simple method to do something like this or should I be using .bind() to mouseover and mouseout events? I know this should be simple, I am probably just not thinking clearly.

$('#el').click(function(e){
    e.preventDefault();
    var $prevEl =   $(this).parent().find('.prev-el');
    $prevEl.fadeToggle();
});

One thing to mention is I would like the $prevEl to stay visible after hovering the triggering #el element. What is the best way to go about this?

Thank you in advance,

DT

Upvotes: 0

Views: 573

Answers (2)

Andy
Andy

Reputation: 30135

this should work:

$('#el').mouseover(function(){
    $(this).parent().find('.prev-el').fadeIn();
});

By the way, you can use .next() and .prev() instead of .parent().find(...) (depending on your html)

Upvotes: 0

Blazemonger
Blazemonger

Reputation: 92963

You can use $('#el').mouseover(... instead of $('#el').click(..., but you should use fadeIn instead of fadeToggle when you're using mouseover:

$('#el').mouseover(function(e) {
    var $prevEl = $(this).parent().find('.prev-el');
    $prevEl.fadeIn();
});

http://jsfiddle.net/mblase75/eXjTb/3/

If you want it to fade back out on mouseout, though, use .hover as a shorthand way to combine the two and keep the fadeToggle:

$('#el').hover(function(e) {
    var $prevEl = $(this).parent().find('.prev-el');
    $prevEl.fadeToggle();
});

http://jsfiddle.net/mblase75/eXjTb/2/

Upvotes: 2

Related Questions