jquery：在另一个元素的顶部显示一个元素，并在其上禁用鼠标悬停事件

Question

这是小提琴：http://jsfiddle.net/5Lfqr/

小提琴包含一对图像（拇指和大）的html：

<div class="wrapper">
<a href="http://cssglobe.com/lab/tooltip/02/1.jpg" class="preview" title="">
    <img src="http://cssglobe.com/lab/tooltip/02/1s.jpg" alt="gallery thumbnail">
</a>
</div>

当用户将鼠标悬停在缩略图上时，想法是显示大图像。

这个解决方案非常简单，除了一件事情以外效果很好：原来，大图像的偏移位于鼠标位置的右侧和下方。我希望大图像通过拇指，所以它应该覆盖它。当我实现它时，改变偏移量如下：

xOffset = -100;
yOffset = -100;

大图像闪烁。这可能是因为鼠标光标在拇指上方并且同时在大拇指上方，因此它无法决定做什么。悬停时，大图像应该变得透明。

有解决方案吗？

Answer 1

你可以这样做：

将预览放在缩略图后，只需在鼠标输入时将缩略图变为透明：

http://jsfiddle.net/nthDB/

$(this).css("opacity", "0");

当鼠标离开时，您需要将其变为不透明：

$("a.preview").mouseleave(function(e){
    $(this).css("opacity", "1")
});

---

然而，这对我来说感觉有点尴尬......而且也不是最好的方法来完成你正在做的事情。我认为你可以诚实地用CSS使用pseduo元素做大部分（如果不是全部）。我会把小提琴弄得乱七八糟地看看。

修改

仅限CSS（最基本的）。想要使用Pseudo元素..但无法让它与图像一起使用（你可以使用背景图像，但不确定是否更好）：

CSS only hover preview jsFiddle

HTML

<div class="wrapper">
    <img src="http://cssglobe.com/lab/tooltip/02/1s.jpg" class="thumb">
        <img src="http://cssglobe.com/lab/tooltip/02/1.jpg" class="full">
</div>

CSS：

.wrapper {
    position: relative;
    width: 100px;
    top: 150px;
    height:75px;
    margin: auto;
}

.thumb {
    position:relative;
    z-index:2;
}

.full {
    position:absolute;
    left:50%;
    margin-left:-200px;
    top:50%;
    margin-top:-150px;
    z-index:1;
    display:none;
}

.wrapper:hover .full {
    display:block;
}
.wrapper:hover .thumb {
    display:none;
}

你也可以这样触发它，如果你想在拇指区域外面关闭预览（不知道你为什么会这样做）：

.thumb:hover ~ .full {
    display:block;
}
.thumb:hover {
    opacity:0;
}

Answer 2

尝试这个脚本，如果你喜欢它看起来不错，

this.imagePreview = function(){ 
$("a.preview").hover(function(e) {

  $("img").attr({src:"http://cssglobe.com/lab/tooltip/02/1.jpg"}); 
}, function(e) {
   $("img").attr({src:"http://cssglobe.com/lab/tooltip/02/1s.jpg"}); 
});

};
$(document).ready(function(){
imagePreview();
});