一旦我添加錨標記，圖標不會在懸停時更改顏色。

-1

我有一個社交媒體小工具，我想包括在我的網站。我有一個灰度和每個部件的彩色圖像。訣竅是在鼠標懸停時將小部件的顏色更改爲灰度。所有似乎工作正常，直到我插入代碼。懸停不再起作用。有人可以有一個想法如何解決這個問題。提前致謝。一旦我添加錨標記，圖標不會在懸停時更改顏色。

這裏是html代碼。

<html> 
<header> 
<title>image hover</title> 
<link rel="stylesheet" type = "text/css" href= "style.css"/> 
</header> 
<body> 
<div id = "wrapper"> 
<div id = "facebook"><a href = "https://www.facebook.com/pages/CIT-Care/138858432940938/"><img src = "images/facebook.fw.png"/></a></div> 
<div id = "twitter"></div> 
<div id = "googleplus"></div> 
<div id = "whatsapp"></div> 
<div id = "skype"></div> 
</div> 
</body> 
</html>

和CSS：

body{margin: 0; border:0; padding: 0;} 
#wrapper{width: 960px; margin: 50px auto; height: 500px; border: 1px solid #dedede;} 
#facebook{background-image: url('images/facebook.fw.png'); background-repeat: no-repeat; float: left; height: 52px; width: 52px;} 
#facebook:hover{background-image:url('images/facebook1.fw.png');} 
#twitter{background-image: url('images/twitter.fw.png'); background-repeat: no-repeat; float: left; height: 52px; width: 52px; margin-left: 10px;} 
#twitter:hover{background-image:url('images/twitter1.fw.png');} 
#googleplus{background-image: url('images/googlep.fw.png'); background-repeat: no-repeat; float: left; height: 52px; width: 52px; margin-left: 10px;} 
#googleplus:hover{background-image:url('images/googlep1.fw.png');} 
#whatsapp{background-image: url('images/whatsapp.fw.png'); background-repeat: no-repeat; float: left; height: 52px; width: 52px; margin-left: 10px;} 
#whatsapp:hover{background-image:url('images/whatsapp1.fw.png');} 
#skype{background-image: url('images/skype.fw.png'); background-repeat: no-repeat; float: left; height: 52px; width: 52px; margin-left: 10px;} 
#skype:hover{background-image:url('images/skype1.fw.png');}

來源

2013-02-24 Allylcay

你如何認爲有人會用不可理解的CSS回答一個問題。使用http://jsfiddle.net/也是一個好主意。 – 2013-02-24 14:36:12

使用CSS：懸停時，不能更改懸停時的HTML元素。你可以改變的是CSS樣式。在這種情況下，您想要做的是將背景圖像從B & G更改爲顏色一。所以，在你的html中你定義了這個鏈接，在你的css中定義它的大小，定義背景圖片，然後（例如）#facebook a：hover {code stuff}

換句話說，在HTML中，而是使用CSS來定義原始圖像並使用背景圖像屬性懸停狀態圖像。另外，不要忘記爲這個區域定義尺寸。

來源

2013-02-24 18:07:03

的:hover可能工作得很好，它只是你在它前面加img標籤，你不能看到變化......

來源

2013-02-24 14:37:10 xpy

我該怎麼做才能看到變化？ – Allylcay 2013-02-24 14:55:59

我想你應該擺脫'img'標籤到'錨'或只是隱藏像這樣的CSS'#twitter：hover img {display：none;}' – xpy 2013-02-24 15:04:59

但我會擺脫彩色圖像如果我這樣做，我的懸停不會有任何影響。 – Allylcay 2013-02-24 15:11:04

一旦我添加錨標記，圖標不會在懸停時更改顏色。

回答

相關問題