懸停時的圖像更改但保持不變

我正在製作一個交互式地圖，並希望在其上有一些按鈕，它們在懸停時會改變顏色（單獨圖像），然後鏈接到不同的圖像。懸停時的圖像更改但保持不變

我有使這項工作是一個大問題......我現在的CSS是一個爛攤子：

a.button 
{ 
position: inherit; 
display:block; 
background:transparent url('images/button.png') bottom; 
background-repeat: no-repeat; 
} 

a.button:hover 
{ 
position: inherit; 
background-image: url('images/button_hover.png'); 
background-repeat: no-repeat; 
} 

#one 
{ 
position: fixed; 
left:225px; 
top:702px; 
}

HTML：

<div id="map"><img src="images/map.png"/></div> 

     <a href="http://matthewligotti.com" class="button"/> 
       <img src="images/button.png" id="one"/> 
     </a> 

    </div>

所以我想圖像是鏈接和懸停每個按鈕的相同的兩個圖像唯一改變的就是他們帶給你的鏈接。我該怎麼做呢？

來源

2013-04-17 psychoticpanda

如果你想讓你的懸停圖像保持不變，你必須使用JavaScript來交換背景圖像CSS。 – Raptor

我不確定要理解......你想製作一個懸停的互動地圖，就像[這個]（http://www.htmldrive.net/items/demo/704/pure-CSS-Image-地圖）？ – Arkana

如果你可以編輯圖像，你可以將它們疊加成一個.png，將它們疊放在一起。然後，如果按鈕，按鈕爲100像素X 200像素，你可以做這樣的事情：

a.button 
{ 
display:block; 
height:100px; 
width:200px; 
background-image:url('1.jpg'); 
background-position:0 0; 
background-repeat: no-repeat; 
} 

a.button:hover 
{ 
background-position:0 -100px; 
}

和

<a href="http://matthewligotti.com" class="button"/></a> 
<a href="http://matthewligotti.com" class="button"/></a>

這將切換新的雙圖像的頂部或底部的一半被顯示。

這是做你的意思嗎？

來源

2013-04-17 04:58:42 andrwct

這對你有幫助嗎？ – andrwct

懸停時的圖像更改但保持不變

回答

相關問題