Question

我有三张照片。我想让another image置于我正在徘徊的那个之上。当我用鼠标移动时它就消失了。我怎么能得到这个？ jQuery没问题，所以也可以添加动画： - ）

<ul>
<li>
    <a class="toggle" href="#g1"><img src="blahblah.jpg" /></a>
    <a class="toggle" href="#g2"><img src="blahblah.jpg" /></a>
    <a class="toggle" href="#g3"><img src="blahblah.jpg" /></a>
</li>

Answer 1

抱歉，我不确定我是否清楚地理解了您的问题，但我认为这对您有所帮助。

<div id="dv1" style="position:relative">
<img id="img1" style="position:absolute" src="image1.jpg">
<img id="img2" src="image2.jpg" width="150">
</div>
//make this div position relative and make images positions as absolute

看一下这个例子

jsfiddle demo

Answer 2

我想建议一种方法，其中页面中的隐藏元素可以重复使用，并在悬停时动态定位在元素顶部。

可以使用隐藏元素上的Jquery控制动画

$('.toggle img').mouseover(function(){
// Get the current offset of the image
var currentElementOffset=$(this).offset();

// set the current offset of the overlay image
$(".overlay").css({
    top: currentElementOffset.top, 
    left: currentElementOffset.left
});
$(".overlay").fadeIn(500);});

鼠标离开时隐藏叠加层

// Hide the overlay image when the mouse hovers out
$('.overlay').mouseleave(function(){
    $(".overlay").fadeOut(500);
});

Check this implementation

在悬停时添加透明度在另一个上面的图像

2 个答案: