Question

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

Answer 1

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/