0

次のページのフッターにソーシャルアイコンの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;}

ご覧のとおり、ホバー時に背景色を変更しようとしていますが、何も起こりません。それを修正する方法について何かアイデアはありますか？

4

3 に答える 3

1

画像/アイコン自体には透明な背景がないため、画像が上にあるため、どの色を使用しても表示されません。

白い背景画像のデモしたがって、その画像を更新して背景を透明にする必要があります。そうすれば、機能するはずです。

于 2012-11-13T10:59:45.953 に答える
1

PNGの背景は透明ではありません...白一色です。白を削除し、透明なpngとして保存すると、作業がずっと楽になります:)

于 2012-11-13T10:33:03.360 に答える
0

これを試して：

.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;}
于 2012-11-13T10:31:12.713 に答える