Question

在我的页面中，我想在网格视图中显示黑白图像列表，当我将鼠标悬停在该图像上时，它会显示彩色图像。当我移开鼠标时，应再次显示黑白图像。

当我点击特定图像（即黑白图像）时，应该同时将其转换为彩色图像，此外还应添加刻度标记图像。

我使用了以下脚本和HTML代码

SCRIPT

$(".swap_image").live('click', function() {
if($(this).attr("class") == "swap_image") {
    this.src = this.src.replace("_blackwhite", "_color");
    $('#tick_' + $(this).attr('rel')).show();
} else {
    this.src = this.src.replace("_color", "_blackwhite");
    $('#tick_' + $(this).attr('rel')).hide();
}
$(this).toggleClass("color");
return false;});

HTML

<img id="tick_{{img.id}}" src="{{MEDIA_URL}}img/tick.png" style="position:absolute;" ><a href="#"><img rel="{{img.id}}" src="{{MEDIA_URL}}{{ img.logo_blackwhite }}" onmouseover="this.src='{{MEDIA_URL}}{{ img.logo_color }}'" onmouseout="this.src='{{MEDIA_URL}}{{ img.logo_blackwhite }}'" class="swap_image" /></a>

我使用上面的代码，一切正常，但当我再次移动鼠标时，图像变成黑白图像（因为我使用了鼠标输出功能）

还有其他更好的主意吗？或

如何克服这个问题？在此先感谢

Answer 1

我建议您在单击时向图像添加一个类。然后当执行mouseout函数时，只需包含一个if / then，如果该类不存在，则只将图像交换回黑白。

Answer 2

单击图像然后在那里留下一些足迹。喜欢改变图像的类，现在在mouseout函数中检查图像是否具有该特定类。如果什么都不做，否则改变图像颜色。

如何克服图像悬停中的这个问题？

2 个答案: