變化圖像鏈接時，將鼠標懸停在鏈接的CSS

我有此鏈接：變化圖像鏈接時，將鼠標懸停在鏈接的CSS

<a href = "" ><img src="images_cartographie/cartographie3_05.gif" width="207" height="47" alt=""></a></td>

，我想改變形象，當用戶在鏈接上我測試：

#planification:hover{ 
background-image:"images_cartographie/cartographie3_03.gif"; 
}

但圖像沒有按不會改變，它被忽略，（我測試過的背景顏色，它的工作原理（然後問題不在url或...））

當我使用背景圖像沒有像這樣懸停：它doesn不會出現：

#planification{ 
background-image:"images_cartographie/cartographie3_03.gif"; 
}

注意：我生成的頁面用photoshop

你有什麼想法

來源

2013-02-24 simonTifo

使用背景圖像：{背景圖像：}'和'#planification：懸停：{背景圖像：}' – 2013-02-24 14:26:28

我編輯後 – simonTifo 2013-02-24 14:29:32

除去'src'從'IMG '.... – 2013-02-24 14:32:29

您可以完全去除img，因爲你通過CSS在a標記添加的效應。

HTML

<a href="" class="image_link"></a>

CSS

.image_link{ 
    display:block; 
    width:800px; 
    height:600px; 
    background:url('http://ferringtonpost.com/wp-content/uploads/2012/07/Responsibilities-of-Owning-a-New-Puppy-Photo-by-bestdogsforkids.jpg'); 
} 

.image_link:hover { 
    display:block; 
    width:800px; 
    height:600px; 
    background:url('http://25.media.tumblr.com/tumblr_m4frqhdW0k1rwpusuo1_1280.jpg'); 
}

JSFiddle。

請注意，您必須添加dispay:block/inline-block到a

來源

2013-02-24 14:38:41 Vucko

謝謝你，它的作品 – simonTifo 2013-02-24 15:02:42

JSFiddle +1 – 2013-11-28 17:37:24

我有點困惑你的問題，但它聽起來像是你需要把兩個不同的圖像。所以，當你滑過時有一個圖像，當你沒有時有另一個圖像。懸停後，您只需爲背景網址放置不同的路徑。此外，你應該在你的img標籤中放置一個木板gif以實現向後兼容。

您還應該爲圖片使用自閉標籤/>。標籤以您發佈的方式打開。

#planification 
{ 
    background: url(images_cartographie/cartographie3_03.gif) 
} 

#planification:hover 
{ 
    background: url(images_cartographie/new_image_goes_here.gif) 
} 

<a id="planification" href = "" ><img src="images_cartographie/blank.gif" width="207" height="47" alt=""/></a>

兩個`#planification

來源

2013-02-24 14:49:52 Ben

變化圖像鏈接時，將鼠標懸停在鏈接的CSS

回答

相關問題