Html 隐藏图像悬停上的跨度类

我正在尝试一种效果，当一个人在我的灰度图像上悬停时，图像会变成彩色，所有的高光都会隐藏

我已经实现了在悬停状态下将图像从灰度转换为彩色，我的问题在于关闭多个高光

这里有一个链接，你可以看到我的位置：www.karenrubkiewicz.com

和一些编码：

HTML

此外，我希望过渡淡入淡出。 任何帮助都将不胜感激。 提前谢谢

否，没有“先前同级”选择器

解决问题的方法是将

。突出显示
和下一个
A
放在一个div中。然后为该div写入
悬停

例如：

HTML

如果可能的话，你能创建一个jsfiddle吗？你是对的，这是可行的，只是我希望页面上突出显示的所有内容都“去突出显示”，不确定你是否只能通过css实现这一点。使用javascript“取消突出显示”所有内容。
<a href="#" ><img class="greyscale" src="images/projects/operakrakowska/operakrakowska_01.png" width="750px"/></a>

<span class="highlight">Opera Krakowska</span>
*All highlighted words have been given this span

img.greyscale {
filter: gray; /* IE6-9 */
-webkit-filter: grayscale(100%); /* Chrome 19+ & Safari 6+ */
-webkit-transition: grayscale 500ms;
-moz-transition: grayscale 500ms;
-o-transition: grayscale 500ms;
transition: grayscale 500ms;
}

img.greyscale:hover {
filter: none;
-webkit-filter: grayscale(0%);
 }

.highlight{
background-color:#FF0;
}

    <div class="item">
        <h3><span class="highlight">Opera Krakowska</span><br>
            <span class="h2">10.15.2013</span><br>
        </h3>
        <a href="#"><img class="greyscale" src="images/projects/operakrakowska/operakrakowska_01.png" width="750px"></a>
    </div>

    .item:hover a img.greyscale {
      filter: none;
      -webkit-filter: grayscale(0%);
    }

    .item:hover h3 .highlight{ display:none; }