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

I want to make the A image transparently when the mouse pointer is over the B image so that I can see either image.

我想在鼠标指针悬停在B图像上时透明地制作A图像,这样我就可以看到任一图像。

How should I change this?

我应该怎么改变这个?

3 个解决方案

#1

If you are having trouble with posting code here, read this. Make sure you include this with any jQuery code you use:

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

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

This demo is simplified to show some possibilities.

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

jQuery has a number of mouse events (see image B)

jQuery有许多鼠标事件(见图B)
Using .css(), you can change properties like:

使用.css(),您可以更改以下属性:
- display
- visibility (see image A)
  
  能见度(见图A)
- opacity
You can use the jQuery methods hide() and show() (see image C)

你可以使用jQuery方法hide()和show()(见图C)
Or try assigning a class to the targeted element with a property mentioned previously, then use addClass and removeClass (see image D)

或者尝试使用前面提到的属性为目标元素分配一个类,然后使用addClass和removeClass(参见图像D)

Snippet

$(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">

#2

You can use CSS opacity property to make image transparent

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

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

Here is link to JSFiddle: https://jsfiddle.net/8hbmyu9k/2/

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

#3

You can change the opacity value of image on the hover event of image B.

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

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

Now at the hover event of image B (img tag with class B)

现在处于图像B的悬停事件(带有B类的img标签)

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

#1