如何讓CSS懸停影響不同的標籤？

Question

比方說，我有以下幾點：

<style> 
    .myLabel { 
     color: blue; 
    } 
    .myLabel:hover { 
     color:red; 
    } 
</style> 
<div> 
    <img src='myimage.png' /> 
    <span class='myLabel'>Image Label</span> 
</div> 

是否有可能取代圖像（也可以通過CSS），當他們將鼠標懸停在跨度？如果是這樣，我該怎麼做？

Answer 1

似乎沒有任何兄弟姐妹選擇以前的兄弟姐妹。

W3定義adjacent siblings和一些瀏覽器的支持似乎是供general siblings - 但是，無論是以下兄弟（一個或多個）。

所以，我認爲你會發現用:hover設置爲div更容易。

而且，我從來沒有聽說過CSS能夠改變src屬性。關於我能想到的唯一方法可能通過CSS改變圖像的方法是讓src爲透明圖像並更改background-image。

<style> 
    .myLabel img { background-image: url('...'); } 
    .myLabel span { color: blue; } 
    .myLabel:hover img { background-image: url('...'); } 
    .myLabel:hover span { color:red; } 
</style> 
<div class='myLabel'> 
    <img src='transparent.png' /> 
    <span>Image Label</span> 
</div> 

Answer 2

一種技術是讓一個圖像文件中包含多個圖像，並使用css規則更改要顯示的文件內的偏移量。

看到：http://www.alistapart.com/articles/sprites/

明確了 「懸停」 部分。

他們在這裏提供了一個功能例如：

http://www.alistapart.com/d/sprites/ala-image3.html

編輯：我只是意識到你問，使圖像的變化則懸停在跨度不是圖像本身。要做到這一點，我相信你需要使用JavaScript。

Answer 3

你也可以把圖像的跨度內：

<div class='myLabel'> 
    <span> 
     <img src='transparent.png' /> 
     Image Label 
    </span> 
</div> 

然後你的CSS是：

.myLabel span:hover img { ... } 

FYI只有<一個>標籤一起工作：徘徊在IE6（但它仍舊老）

Answer 4

一個更簡單的方法來做到這一點將刪除img元素，並使圖像成爲span上的背景圖像。然後你就可以在你的兩個CSS規則控制的背景圖像：

.myLabel { color: blue; background-image:url(myimage.png) } 
.myLabel:hover {color:red; background-image:url(myotherimage.png) } 

然後你只需要一些CSS定位的背景圖像，而且可能添加足夠的填充爲背景圖像不重疊的任何文字。

Answer 5

不，您不能以替換以任何方式取代src屬性的值。

Jonathan Lanowski說： 而且，我從來沒有聽說過CSS能夠改變src屬性。關於我認爲可以通過CSS改變圖像的唯一方法是讓src具有透明圖像並改變背景圖像。

記住IMG元素的含義。它應該顯示一個圖像作爲內容，而不是演示文稿。如果您在src-attribute中放置了透明的.gif或其他任何內容，則還會從頁面中刪除內容。

這同樣適用於使用不同的CSS懸停技術來更改圖像，只要您在src-attribute中沒有實際圖像，仍然會刪除內容。另外，只要您的文檔被標記爲方式，您將無法在懸停span-element的同時更改圖像。

那麼，這是一個典型的Javascript作業。