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的悬停事件中更改图像的opacity value。

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

如果您在此处发布代码时遇到问题，请阅读this。确保将此包含在您使用的任何jQuery代码中：

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

简化此演示以显示一些可能性。

jQuery有多个mouse events（见图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">

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

3 个答案: