1

我想知道如何对我的图像进行编码（具有翻转/悬停状态），以便在单击它们时，即使光标不在 img 本身上方，翻转状态也会保持不变。并让其他可能已单击的 .sibling<img>恢复到它们的非翻转状态。这是我正在使用的代码：

jQuery

$('img').hover(function(){
var e = $(this);
e.data('originalSrc', e.attr('src'));
e.attr('src', e.attr('data-rollover'));
}, function(){
var e = $(this);
e.attr('src', e.data('originalSrc'));
});

html

<img id="button-all" src="images/button-all.png" data-rollover="images/button-all-rollover.png" />
<img id="button-adverts" src="images/button-adverts.png" data-rollover="images/button-adverts-rollover.png" />
<img id="button-musicvideos" src="images/button-musicvideos.png" data-rollover="images/button-musicvideos-rollover.png" />
<img id="button-films" src="images/button-films.png" data-rollover="images/button-films-rollover.png"/>

所以现在当我将鼠标悬停（翻转）在它们交换到数据翻转 srcs 的图像上时。但是当单击图像时（因为它们是带有 jquery 命令的按钮），我希望 img 的 src 与 data-rollover src 交换，以便当光标不再悬停在图像上时 data-rollover src 状态遗迹。除此之外，我需要任何先前单击的图像以使用其原始 src 路径恢复到其原始（非数据翻转）状态。

1）翻转图像，它显示数据翻转状态（除非它已经被点击，因此当翻转到数据翻转状态时不会改变）。

2）单击图像，它将src交换为data-rollover src

3) 所有其他 .sibling 图像将恢复到其原始 src 状态。

希望这是有道理的！谢谢！

4

0 回答 0