HTML和CSS製作一個圖像鏈接懸停效果？

我剪掉了一堆我的代碼，以便找到我需要幫助的東西，我有一張圖片，當我將鼠標懸停在它上面時，它會更改圖片，但是如果我點擊它爲您帶來的圖片讓我說mywebsite.com ?? http://pastebin.com/h83yi3e3 HTML和CSS製作一個圖像鏈接懸停效果？

代碼：

<html> 
    <head> 
    <style> 
     #buttonOne {width:140px;height:60px;background-image:url(buttonOne.png);} 
     #buttonOne:hover {width:140px;height:60px;background-image:url(buttonOneH.png);} 
     #buttonTwo {width:140px;height:60px;background-image:url(buttonTwo.png);} 
     #buttonTwo:hover {width:140px;height:60px;background-image:url(buttonTwoH.png);} 
     #buttonThree {width:140px;height:60px;background-image:url(buttonThree.png);} 
     #buttonThree:hover {width:140px;height:60px;background-image:url(buttonThreeH.png);} 
    </style> 
    </head> 
    <body>  
     <div id="buttonOne"> 
     </div> 

     <div id="buttonTwo"> 
     </div> 

     <div id="buttonThree"> 
     </div>  
    </body> 
</html>

來源

2012-11-20 user1836262

你是什麼意思*它可以讓你說mywebsite.com * –

讓那些div s轉換a標籤來代替。這就是他們的目標。如果你想要一個你可以點擊的元素轉到另一個url，你需要一個<a>標籤。

<a id="buttonOne" href="http://letssaymywebsite.com/"></a> 
<a id="buttonTwo" href="http://letssaymywebsite.com/"></a> 
<a id="buttonThree" href="http://letssaymywebsite.com/"></a>

來源

2012-11-20 06:53:08

使用錨標記，你可以不喜歡這個 -

<a id="buttonOne" href="mywebsite.com"></a> 
...

，然後你可以使用a:hover來改變圖像

在CSS-

#buttonOne a:hover 
{ 
background-image:url(buttonOneH.png); 
} 
...

來源

2012-11-20 06:55:07 Cdeez

沒有理由使用內聯樣式。只要ID保持不變，張貼的CSS應該可以正常工作。 –

我剛剛舉了一個例子，說明了代碼的地址。將編輯它。 – Cdeez

嗯，我」米不知道你們是什麼人abotu removign divs，沒有爲我工作，我做的是在那些空的div我已經加入了一個不可見的鏈接圖像。

<div id="buttonOne"> 
<a href="mywebsite.com" target="_blank"><img src="inbut.png"> 
</a> 
</div>

來源

2012-11-20 16:40:14 user1836262

HTML和CSS製作一個圖像鏈接懸停效果？

回答

相關問題