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(); 
    } 
} 

Answer 2

给你想用一个类（简单而有意义的像rollover）要做到这一点，并与$(".rollover")选择图像。如果你控制HTML，那应该就是这一切。