如何在jQuery中制作透明图像？

Question

我想在鼠标指针悬停在B图像上方时使A图像透明，以便我可以看到其中任何一个图像。

我应该如何改变呢？

Answer 1

您可以使用CSS opacity属性使图像透明

$("img").bind("mouseover", function() {
  $("img").css("opacity", "0.5");
  $(this).css("opacity", "1");
});

这是JSFiddle的链接： https ://jsfiddle.net/8hbmyu9k/2/

Answer 2

您可以在图像B的悬停事件上更改图像的不透明度值 。

img.transparent
{
   opacity: 0.3; filter: alpha(opacity=30); /* For IE 8 & 9 (more valid) */
}

现在在图像B的悬停事件上（B类的img标签）

$("img.B").hover(function(){
   $("img.A").addClass("transparent");    
},function(){
   $("img.A").removeClass("transparent");    
});

Answer 3

如果您在此处发布代码时遇到问题，请阅读此内容 。 确保在您使用的所有jQuery代码中都包含此代码：

<script src="//ajax.googleapis.com/ajax/libs/jquery/2.2.0/jquery.min.js"></script>

本演示经过简化以显示一些可能性。

• jQuery有许多鼠标事件 （请参见图B）

• 使用.css() ，您可以更改以下属性：

  • display

  • visibility （见图A）

  • opacity

• 您可以使用jQuery方法hide()和show() （请参见图C）

• 或者尝试使用前面提到的属性为目标元素分配一个类，然后使用addClass和removeClass （请参见图D）

片段

 $(function() { $('.B').mouseover(function() { $('.A').css('visibility', 'hidden'); $('.C').hide(); $('.D').addClass('invisible'); }); $('.B').mouseleave(function() { $('.A').css('visibility', 'visible'); $('.C').show(); $('.D').removeClass('invisible'); }); }); 

 .invisible { display: none; } 

 <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> <img src="http://placehold.it/100x100/000/fff?text=A" class="A"> <img src="http://placehold.it/100x100/00e/fc1?text=B" class="B"> <img src="http://placehold.it/100x100/fc1/00e?text=C" class="C"> <img src="http://placehold.it/100x100/e0e/fcf?text=D" class="D">