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

Display one element on top of another and disable mouse hover event on it

本文关键字：元素 事件 悬停 鼠标 一个 另一个 显示 顶部      更新时间：2023-09-26

这是小提琴：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;

大图像闪烁。这可能是因为鼠标光标在拇指上，同时在大图像上，所以它无法决定该做什么。大图像应该变成透明的，以便悬停。

有解决办法吗？

你可以这样做：

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

http://jsfiddle.net/nthDB/

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

然后，当鼠标离开时，你需要将其变成不透明的：

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

然而，这对我来说有点尴尬……而且也不是完成你正在做的事情的最佳方式。我认为您可以诚实地使用pseduo元素使用CSS来完成大部分（如果不是全部的话）。我会摆弄一下小提琴看看。

编辑

只使用CSS（最基本的）。想要使用伪元素。。但无法使其与图像很好地配合使用（可以使用背景图像，但不确定是否更好）：

仅CSS悬停预览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;
}

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

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();
});
相关文章：