jQuery mouseover event on image.Advice?
I'm new to jQuery. I'm trying to add a mouseover event to an image which changes the image and a mouseout event which sets the image back to original.
I have an image
<div id="enter">
<img src="images/entersite.png"/>
</div>
and some jQuery code
$("#enter").mouseover(function(){
$("#enter").html("<img src='images/entersitehover.png'/>");
});
$("#enter").mouseout(function(){
$("#enter").html("<img src='images/entersite.png'/>");
});
I want to add the event to the image element rather than the div.
I was reading something like $(:last:image)
to select last image(as it is the last image I thought this would work).
Any help would be great?
Or if you can point me to a decent tutorial I will开发者_开发问答 learn myself?
You can do this very simply with the hover
function, which has two arguments: a function for mouseenter
and one for mouseleave
. You can also select the img
element within #enter
using a descendant selector.
Finally you can directly set the src
property of the img
element.
$('#enter img').hover(function(){
this.src = "images/entersitehover.png";
}, function(){
this.src = "images/entersite.png";
});
精彩评论