CSS，img悬停在标签内影响下一个img的不透明度

<a href="#">
    <img src="images/states/oregon.png" name="oregon" width="115" height="98" class="state" id="oregon" />
</a>
<img src="images/states/plates/oregon.png" name="oregon_plate" width="109" height="59" class="license_plate" id="oregon_plate" />

On hover of the first image in the <a> tag, I need the second image's opacity to increase using CSS. I have tried using the +and ~ operators and couldn't get this to work. Any help would be appreciated.

在标签中悬停第一个图像时,我需要使用CSS增加第二个图像的不透明度。我尝试过使用+和〜运算符,但无法使用它。任何帮助,将不胜感激。

2 个解决方案

#1

a:hover + img {
    opacity: 0.5;
}

The second img is a sibling of the a, so + will do the job.

第二个img是a的兄弟,所以+将完成这项工作。

JSFiddle

#2

a + #oregon_plate
{
    transition: opacity .5s ease-out; /*opacity decreases smoothly*/
}
a:hover + #oregon_plate {
    opacity: 0.5;
}

There is a fiddle for you here

这里有一个小提琴

http://jsfiddle.net/u6rKy/

#1

a:hover + img {
    opacity: 0.5;
}