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/

悬停不透明度的图像不同于悬停的图像

2 个答案: