图像替换脚本(jQuery)
图像替换脚本(jQuery)
提问于 2011-08-18 15:20:23
我正在构建一个员工简历页面，在那里客户希望选择的缩略图显示在完全不透明的彩色和所有其他在较低的不透明度在黑白。这并不难--问题是，每个缩略图都必须有一个彩色状态和一个黑白状态。因此，我的下一个想法是在mouseover上交换黑白图像(它将与彩色背景图像一起放置在div中)。
$('.thumbnail').mouseenter(function(){
var current = $(this); // cache thing
var thishtml = current.html(); // get contents of thing
current.html('').mouseleave(function(){ //empty the thing
current.html(thishtml); //put the variable back in the thing
});
});我的HTML将如下所示：
<div class = "thumbnail" style = "background-image: url(color.jpg);">
<img src="blackandwhite.jpg" />
</div>显然，既然我问了这个问题，我的想法就行不通了。鼠标悬停会移除innerHTML，变量会成功转换，但不会再次插入到DIV中。我遗漏了什么？
回答 5
Stack Overflow用户
回答已采纳
发布于 2011-08-18 15:25:46
使用css而不是交换HTML。
CSS：
.hidden {
visibility:hidden
}JS：
$(".thumbnail").hover(
function () {
$(this).find('img').addClass('hidden')
},
function () {
$(this).find('img').removeClass('hidden')
}
);Stack Overflow用户
发布于 2011-08-18 15:24:04
尝试使用.show()和hide()分别使blackandwhite.jpg图像可见和隐藏。
$(".thumbnail").hover(
function () {
$(this).children("img").hide(); //hide b and w on mouse in
},
function () {
$(this).children("img").show(); //showb and w on mouse out
}
);Stack Overflow用户
发布于 2011-08-18 15:25:06
当您清空html时，不会在任何情况下触发mouseleave事件来再次设置html。
工作demo。在这个演示中，我只是设置了一个角色显示，你可以看到事件被触发，删除角色，它不会起作用。
页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持
原文链接：
https://stackoverflow.com/questions/7109903
复制相关文章
相似问题
腾讯云开发者
