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

Question

<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" />

在<a>标签的第一个图像的悬停位置，我需要使用CSS增加第二个图像的不透明度。我试过使用+和~操作符，无法让这个工作。

Answer 1

a:hover + img {
    opacity: 0.5;
}

第二个img是a的兄弟，因此+将完成这项工作。

JSFiddle

Answer 2

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

这里有你的小提琴

http://jsfiddle.net/u6rKy/