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，那应该是它的全部内容。

用Jquery翻转图像

2 个答案: