隱藏圖像懸停上的跨度類

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