jquery - 在悬停时在另一个顶部添加具有透明度的图像

Question

我有三个图像。我希望在我悬停的图像之上再放一张图像。当我鼠标离开它时就消失了。我怎样才能得到这个？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

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

可以在隐藏元素上使用 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);
});

检查此实现

Answer 2

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

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