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

【问题标题】：Add image with transparency on top of another on hover在悬停时在另一个顶部添加具有透明度的图像
【发布时间】：2013-10-04 20:06:43
【问题描述】：

我有三张图片。我想让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>

【问题讨论】：

我尝试将图像设置为在每个图像附近悬停（因此，重复三遍），然后是负边距。默认情况下显示：无。然后使用 jquery .attr 我设置我将可见性更改为可见，然后在 mouseleave 上隐藏。问题是运行悬停功能的元素与要应用的元素不同..我不知道如何处理..也许是.find？但是如何将它与 .attr 结合起来呢？

标签： jquery hover jquery-hover

【解决方案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

【讨论】：

【解决方案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

【讨论】：

感谢您的回复！当您在图像之间快速传递时会出现一些问题，但它确实有效！ :-)