Web サイトに含めたいソーシャル メディア ウィジェットがあります。各ウィジェットにグレースケールとカラー画像があります。トリックは、ウィジェットの色をグレースケールに変更して、マウスをホバーすると色付きになるようにすることです。コードに挿入するまで、すべてが正しく機能しているようです。ホバーが機能しなくなりました。誰かがこの問題を解決する方法を考えているでしょうか。前もって感謝します。
これが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');}