html - 在图像悬停时隐藏跨度类

Question

我正在尝试制作一种效果，当有人将鼠标悬停在我的灰度图像上时，图像会变成彩色并且隐藏所有高光。

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

这是一个链接，您可以看到我所在的位置:www.karenrubkiewicz.com

还有一些编码:

HTML

<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

CSS

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;
}

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

Answer 1

不，没有“previous sibling”选择器。 Source

您的问题的解决方案是将 .highlight 和下一个 a 包装在一个 div 中。并为此 div 编写 hover。

例如:

HTML

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

CSS

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

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