0

Here is the fiddle: http://jsfiddle.net/5Lfqr/

The fiddle contains this html for a pair of images (thumb and big):

<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>

The idea is to display the big image when user hovers the mouse over the thumbnail.

This solution is very simple and works well except for one thing: originally, the offset of the big image is just to the right and down of the mouse position. I would like the big image to be over the thumb, so it should cover it. When I implement it, changing the offset like this:

xOffset = -100;
yOffset = -100;

the big image flickers. It's probably because the mouse cursor is over the thumb and at the same time over the big, so it can't decide what to do. The big image should become transparent for hover.

Is there a solution to it?

4

2 回答 2

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();
});
于 2013-07-25T11:50:49.193 回答
0

你可以这样做：

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

http://jsfiddle.net/nthDB/

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

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

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

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

编辑

仅使用 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;
}
于 2013-07-25T11:14:01.820 回答