CSS：懸停 - 如何使：懸停在文字上影響圖像？

Question

我有一個導航菜單完成的圖像，並且我使用CSS過渡和不透明度在圖像上發光效果的鼠標。爲了SEO的目的，我希望導航菜單包含文本鏈接。

的發光效果使用CSS background-image和HTML前景圖像完成。在鼠標上方，前景圖像的不透明度慢慢變爲0，露出下面的背景圖像。

我已經制定了如何在圖像上放置文字，使用position:relative作爲父div和position:absolute作爲p。但是當鼠標懸停在文本上時，它不再被視爲懸停在圖像上，因爲文本位於圖像的頂部。結果，發光效果不起作用。

在flash中，將鼠標懸停在一個對象上導致另一個對象發生更改非常容易。有沒有辦法在CSS中做到這一點？如果不是，那麼JavaScript可以做我需要的東西？

編輯

感謝您的回信。這是代碼。道歉，如果它是混亂的，我沒有做多年的HTML編碼，並從來沒有使用過CSS。

我只是把文字和鏈接的第一個按鈕爲止。

<div id="nav"> 
    <ul> 
    <li><a href="index.htm"><p class="homebutton">HOME</p><img class="navbutton" src="_images/home-button.png" alt="Website Navigation. Home Button" title="Home" height="115" width="120" /></a></li> 
    <li><img class="navbutton" src="_images/how-button.png" alt="Website Navigation. How To Use Our Services Button" title="How To Use Our Services" height="115" width="120" /></li> 
    <li><img class="navbutton" src="_images/playstation-button.png" alt="Website Navigation. Playstation Repair Button" title="Playstation Repair" height="115" width="120" /></li> 
    <li><img class="navbutton" src="_images/xbox-button.png" alt="Website Navigation. Xbox Repair Button" title="Xbox Repair" height="115" width="120" /></li> 
    <li><img class="navbutton" src="_images/wii-button.png" alt="Website Navigation. Wii Repair Button" title="Wii Repair" height="115" width="120" /></li> 
    <li><img class="navbutton" src="_images/reviews-button.png" alt="Website Navigation. Customer Reviews Button" title="Customer Reviews" height="115" width="120" /></li> 
    <li><img class="navbutton" src="_images/map-button.png" alt="Website Navigation. Location And Map Button" title="Location and Map" height="115" width="120" /></li> 
    <li><img class="navbutton" src="_images/contact-button.png" alt="Website Navigation. Contact Us Button" title="Contact Us" height="115" width="120" /></li> 
    </ul> 

<!-- end .nav --></div> 

CSS

#nav { 
    background-image: url(../_images/nav-bg.png); 
    width:960px; 
    height:115px; 
    margin-bottom:10px; 
    position:relative; 
} 

.navbutton { 
    -webkit-transition:opacity 0.7s ease-in-out; 
    -moz-transition:opacity 0.7s ease-in-out; 
    -o-transition:opacity 0.7s ease-in-out; 
    transition:opacity 0.7s ease-in-out; 
    float:left; 
} 

img.navbutton:hover { 
    opacity:0; 
}  

.homebutton { 
    position:absolute; 
    left:19px; 
    top:70px; 
    color:rgba(255,255,255,1); 
    font-weight:bold; 
    font-size:16px; 
} 

EDIT 2

好，我創建了一個小提琴，使其更易於理解：http://jsfiddle.net/sK5q2/

正如你所看到的圖像不當鼠標移過文字時淡出

Answer 1

基於更新後的問題和小提琴（爲小提琴感謝！）這裏有一個修復：

http://jsfiddle.net/sK5q2/1/

這是一樣簡單簡單地調整你的CSS選擇這樣的：

變化：img.navbutton:hover {

要：a:hover img.navbutton {

我會盡力解釋，但可能它做不好工作。 ;）

如果元素是同級的，如...

<img /> 
<p>Text</p> 

...你可以重新定位他們，但是你有喜歡的款式，但他們彼此非常獨立。雖然你的CSS樣式確實把它放在另一個之上，但它純粹是可視化的，而不是技術性的。將鼠標移到文本上就好像您從<img/>元素移動到<p/>元素。

如果您看到上述HTML，請在鼠標觸及視覺圖像時考慮該佈局。 <img/>將在代碼中突出顯示。如果您觸摸文字，<p/>會突出顯示，這是一個不同的元素。現在

，如果你包裹在一個鏈接...

<a> 
    <img /> 
    <p>Text</p> 
</a> 

...你所定位的鏈接作爲熱點爲:hover，你總是摸鏈接熱點不管是否也觸摸的<img/>或<p/>標籤。

從這個意義上說，如果您觸摸圖像，<a/>標記將會突出顯示，以及<img/>元素。如果移動到文本，<a/>標籤仍將突出顯示，但現在<p/>元素將突出顯示。

事情是，我們的CSS風格是針對「總是感動」的元素<a/>。

對不起，這比我想象的更難解釋。希望這有助於！ =）

乾杯！

---

..原貼..

---

我有一種感覺，你真正的問題是一個簡單的CSS問題，但我創建了一個基於你是什麼證據的概念提琴描述：

http://jsfiddle.net/7rU7L/

的概念是一個標準的水平「選項卡」名單直接從丹Cedarholm的CSS/HTML模式的網站pea.rs拍攝風格（http://pea.rs/navigation/horizontal-tabs）

<li id="a"><a href="#"><img /><b>Ahy!</b></a></li> 

這個概念是，你有一個鏈接，裏面有一個圖像和一些文字。在這種情況下，我使用了<img />標籤，並簡單地用紅色背景和固定的寬度/高度對它們進行了樣式設計。

然後，我絕對將<b/>標籤定位在圖像上。

在懸停時，我調整標記的左側位置（而不是顏色）。

（我縮寫代碼在本例中爲簡單起見）

li a:hover b{ 
    left:45px; 
} 

只需瞄準與:hover僞類的父<a>標籤，並選擇子元素（在這種情況下<b/>）你想風格。然而，我有一種感覺，你的CSS/HTML有更多時髦的事情發生，但這是爲了表明你可以做你正在尋找的東西（改變鏈接的子元素上的樣式）。

如果您發佈真正的代碼，我可以查看它，並調整自己的答案。

我希望有幫助！

乾杯！

Answer 2

你有這樣的嘗試？：

.textThatIwantToHover:hover, .imageThatIwantToAffect:hover{ 
    //some css 
}