jquery - 使用 Jquery 翻转图像

Question

这里是初学者问题。我将创建一个 Jquery 函数，用于在将鼠标悬停在图像上时更改图像。我使用 id 名称作为选择器。如何使其通用，以便我不必为带有翻转图像的每个标签提供函数副本？

$("#home img").hover(    
        function(){ 
            blah
        },
        function(){ 
            blah
        }
 );

Answer 1

不用js也可以实现翻转(只要不需要兼容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;
}   

如果您需要与 IE6 兼容，这应该可以工作(尽管尚未经过测试):

$('.imgHover').hover( 
     function() {
         $('.default', $(this)).hide();
         $('.roll', $(this)).show();
     },
     function() {
         $('.default', $(this)).show();
         $('.roll', $(this)).hide();
     }
}