Question

我有一个社交媒体小部件，我想包含在我的网站中。我为每个小部件都有一个灰度和彩色图像。诀窍是在鼠标悬停时将小部件的颜色更改为灰度级。所有似乎都正常工作，直到我插入代码。悬停不再有效。有人可以知道如何解决这个问题。提前致谢。

这是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');}

Answer 1

:hover可能正常，只是您在其前面添加了img标记，但您无法看到更改...

Answer 2

您无法使用CSS悬停时更改HTML元素：悬停。你可以改变的是CSS样式。在这种情况下，您想要做的是将背景图像从B＆amp; G更改为彩色图像。所以，在你的html中你将它定义为一个链接，在你的css中你定义它的大小，常规的背景图像，然后（例如）#facebook a：hover {code stuff}

换句话说，摆脱HTML中的内容，而是使用CSS来定义原始图像并使用背景图像属性悬停状态图像。另外，不要忘记定义此区域的尺寸。

添加锚标记后，图标不会在悬停时更改颜色。

2 个答案: