rollover images with Jquery
Be开发者_开发百科ginner question here. I'm going to make a Jquery function that is used to change an image when hovering over it. I use the id name as the selector. How do I make it generic so that I don't have to have a copy of the function for every single tag with a rollover image?
$("#home img").hover(
function(){
blah
},
function(){
blah
}
);
You can do rollovers without js (as long as you don't need compatibility with IE6).
HTML:
<div class="imgHover">
<img class="default" src="...">
<img class="roll" src="...">
</div>
CSS:
.imgHover .roll {
display: none;
}
.imgHover:hover .roll {
display: block;
}
.imgHover:hover .default {
display: none;
}
if you need compatibility with IE6, this should work (it's untested, though):
$('.imgHover').hover(
function() {
$('.default', $(this)).hide();
$('.roll', $(this)).show();
},
function() {
$('.default', $(this)).show();
$('.roll', $(this)).hide();
}
}
Give the images you want to do this with a class (simple and meaningful like rollover
) and select with $(".rollover")
. That should be all there is to it, if you control the HTML.
精彩评论