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

2 回答 2

2

:hover可能工作正常，只是你在它前面添加了标签img，你看不到变化......

于 2013-02-24T14:37:10.093 回答
0

您不能使用 CSS :hover 更改悬停时的 HTML 元素。你可以改变的是 CSS 样式。在这种情况下，您要做的是将背景图像从 B&G 更改为彩色图像。因此，在您的 html 中，您将其定义为链接，在您的 css 中，您定义其大小、常规背景图像，然后（例如）#facebook a:hover {code stuff}

换句话说，去掉 HTML 中的 ，而是使用 CSS 来定义原始图像和使用背景图像属性的悬停状态图像。另外，不要忘记定义该区域的尺寸。

于 2013-02-24T18:07:03.297 回答