Hover Opacity＆Text Woes

Question

我想在我的網站上做一些優化，它給我帶來了一個似乎很常見的話題，但是我一直無法找到和我一樣的問題。

我有什麼。圖像精靈（模糊/清晰）和文本頂部。當你在圖像上方徘徊時，它會變得清晰，當你在文字上方懸停時，它會突出顯示並變成藍色。 （圖像將保持清晰）

我想要什麼。要將精靈縮小爲一個圖像（而不是二合一），因爲它是我主頁上的最大文件，我的加載時間中有57％用於圖像。

我做了什麼：從一個精靈飄只是一個清晰的圖像

1）。

2）創建一個新的「霧-IMG」的div容器，其放置在圖像的頂部，白色不透明度：0.15

3）創建一個新的div「IMG-文本」容器的文本到把它放在'foggy-img'之外，這樣不透明度不會影響它，並且已經很好地放置在它應該在的位置。

問題：它很小，透明盒已經很好地代替了精靈並且工作。文字也很好地突出顯示。但。當一個人在文本上方移動時，透視框會再次變爲「霧狀」。

當鼠標懸停在單獨的div中的文本上時，是否有任何方法可以保持「foggy-box」清晰？

的HTML：

<div id="photo-feature"> 
    <a href="services.html"> 
     <div id="img"> 
      <div id="photo-fog"></div> 
      <div id="photo-text"><h3>Learn More...</h3></div> 
     </div> 
    </a> 
</div> 

的CSS：

#photo-feature a { text-decoration: none; } 
#photo-feature #img { margin: 4px 5px 0 4px; width: 565px; height: 283px; background: url(images/photo-feature.png) 0 0; } 

#photo-feature #img #photo-fog { height: 100%; background-color: #fff; opacity: 0.15; } 
#photo-feature #img #photo-fog:hover { opacity: 0; } 

#photo-feature #img #photo-text { position: absolute; margin-top: -34px; margin-left: 428px;} 
#photo-feature #img #photo-text h3 { float: left; display: inline; color: #fff; } 
#photo-feature #img #photo-text h3:hover { color: #0066cc; text-decoration: underline; } 

Answer 1

你可以使用鄰近的兄弟姐妹選擇。 （further details） 它雖然在舊版本的瀏覽器中不起作用（猜猜是哪個）。

你將不得不交換你的HTML的順序。基本上把文本第一再使用這樣的事情：

#photo-text:hover + #photo-fog { // Do something 

現在你不能設置懸停於H3，但爲什麼不只是風格了H3，而不是＃照片文本元素那麼它會正常工作。

編輯：精美彩色協調JS搗鼓你看看：http://jsfiddle.net/will/Gt8KX/

希望幫助:)