CSS，img悬停在<a> tag affecting next img&#39;s opacity</a>内

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/