0

我有一个社交媒体按钮链接集，我想更改背景图像上的位置。这是我的代码： HTML：

<div id="connections">
    <div id="googleplus"><a target="_blank" href="">&nbsp;</a></div>
    <div id="facebook"><a target="_blank" href="">&nbsp;</a></div>
    <div id="twitter"><a target="_blank" href="">&nbsp;</a></div>
    <div id="youtube"><a target="_blank" href="">&nbsp;</a></div>
    <div id="vimeo"><a target="_blank" href="">&nbsp;</a></div>
</div>

CSS：

#connections div { display: inline; }

#connections div a {
    display: inline-block;
    height: 40px;
    width: 40px;
    border: none;
    text-decoration: none;
    font-size: 0;
    margin: 5px;
}

#connections a { background-position: top center; }

#connections a:hover { background-position: 0 -40px; }

#connections #facebook a { background: url('../images/facebook.png') no-repeat; }
#connections #twitter a { background: url('../images/twitter.png') no-repeat; }
#connections #googleplus a { background: url('../images/googleplus.png') no-repeat; }
#connections #youtube a { background: url('../images/youtube.png') no-repeat; }
#connections #vimeo a { background: url('../images/vimeo.png') no-repeat; }

可以在此页面底部看到此预览 -> http://www.bokehcreative.co.uk/about.php

如果我将 !important 应用于 :hover 样式或将悬停样式应用于每个单独的 id，则可以做到这一点。

我可能在这里错过了一个技巧。任何帮助表示赞赏。

4

1 回答 1

3

已编辑

将您的父 div ID 更改为 classes，并为:hover.

<div id="connections">
    <div class="googleplus connections"><a target="_blank" href="">&nbsp;</a></div>
    <div class="facebook connections"><a target="_blank" href="">&nbsp;</a></div>
    <div class="twitter connections"><a target="_blank" href="">&nbsp;</a></div>
    <div class="youtube connections"><a target="_blank" href="">&nbsp;</a></div>
    <div class="vimeo connections"><a target="_blank" href="">&nbsp;</a></div>
</div>

然后将 CSS 应用于类并摆脱 CSS 的双 ID 特性，只使用单个父类声明：

.facebook a { background: url('../images/facebook.png') no-repeat; }
.twitter a { background: url('../images/twitter.png') no-repeat; }
.googleplus a { background: url('../images/googleplus.png') no-repeat; }
.youtube a { background: url('../images/youtube.png') no-repeat; }
.vimeo a { background: url('../images/vimeo.png') no-repeat; }

.connections a:hover { background-position: 0 -40px; }

这应该避免任何类型的特异性问题。jsFiddle 来说明我的意思（感谢初学者，约瑟夫）

于 2013-05-15T19:37:15.590 回答