在悬停时修复CSS精灵

Question

我在下一页的页脚上为社交图标设置了css精灵：

http://www.javaexperience.com/

问题是我想在悬停时更改背景颜色，然后隐藏图像。以下是4个社交图标的CSS代码：

.social-bookmarks {list-style-type: none !important;margin: 0 !important;padding: 0 !important;}
.social-bookmarks li {display: inline !important;float: left !important;margin-bottom: 2px !important;margin-right: 2px !important;padding: 0 !important;width: auto !important;}
.social-bookmarks a {-moz-transition: all 0.3s ease 0s;display: block !important;float: left !important;height: 40px !important;margin: 0 !important;padding: 0 !important;text-indent: -9999px !important;width: 40px !important;background-color: transparent;}
.social-bookmarks .facebook a {background: url("/wp-content/themes/max/images/social.png") no-repeat scroll 0 0 transparent;height:40px;width:40px;background-position:0px 0;}
.social-bookmarks .facebook a:hover {background-color: #3B5998;}
.social-bookmarks .google a {background: url("/wp-content/themes/max/images/social.png") no-repeat scroll 0 0 transparent;height:40px;width:40px;background-position:-40px 0;}
.social-bookmarks .google a:hover {background-color: #DD4B39;}
.social-bookmarks .rss a {background: url("/wp-content/themes/max/images/social.png") no-repeat scroll 0 0 transparent;height:40px;width:40px;background-position:-80px 0;}
.social-bookmarks .rss a:hover {background-color: #FE9900;}
.social-bookmarks .twitter a {background: url("/wp-content/themes/max/images/social.png") no-repeat scroll 0 0 transparent;height:40px;width:40px;background-position:-120px 0;}
.social-bookmarks .twitter a:hover {background-color: #48C4D2;}

正如您所看到的，我正在尝试更改悬停时的背景颜色但没有发生任何事情。有关如何修复的想法吗？

Answer 1

你的PNG没有透明的背景......它们是纯白色的。删除白色，保存为透明png，将使生活更轻松：）

Answer 2

图像/图标的背景没有透明背景，因此当图像位于顶部时，您所放置的颜色将无法显示

因此，您需要将该图片更新为具有透明背景，然后才能正常工作

Answer 3

试试这个：

.social-bookmarks .facebook a {background: transparent url("/wp-content/themes/max/images/social.png") no-repeat 0 0;height:40px;width:40px;}

.social-bookmarks .facebook a:hover {background: #3B5998 url("/wp-content/themes/max/images/social.png") no-repeat 0 0;}