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
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();
});
The technical post webpages of this site follow the CC BY-SA 4.0 protocol. If you need to reprint, please indicate the site URL or the original address.Any question please contact:yoyou2525@163.com.