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

不，没有“上一个兄弟”选择器。 Source

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

EG：

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

隐藏图像悬停时的跨度类

1 个答案: