悬停的不透明度与悬停的不一样

Question

我使用CSS'：hover'规则使图像“消失”并使用不透明度更改重新出现。

我敢肯定有一个简单的代码可以实现，但是我找不到它，而且我没有经验。

我有图像A。在图像A旁边有图像B。图像B的不透明度设置为0。将鼠标悬停在图像A上时，我想将图像B的不透明度更改为1：

<img class="a" src="a.jpg"> <img class="b" src="b.jpg">

我为此类事情找到的所有示例都是在将鼠标悬停在图像A上时更改图像A的不透明度，但是我希望在将鼠标悬停在图像A上时更改图像B的不透明度。

我该如何更改此代码

image.A:hover { opacity:1; }

要影响图像B？

Answer 1

在黑暗中刺刺：

img.A:hover + img.B { opacity: 1 }

Answer 2

您可能想使用jQuery在更多浏览器中更有效地完成此任务。 较旧的浏览器不支持新的CSS3属性。

$(document).ready(function(){
    $('.imageA').hover(function(){
        $('.imageB').animate({
            'opacity': 1
        }, 500);
    }, function(){
        $('.imageB').animate({
            'opacity': 0
        }, 500);
    });
});

看看我的例子

http://jsfiddle.net/Q5c9q/

---

如果您只需要CSS即可完成此操作，这就是方法。

http://jsfiddle.net/Q5c9q/1/