我有一个社交媒体按钮链接集，我想更改它在背景图片上的位置。 这是我的代码: HTML:
<div id="connections">
<div id="googleplus"><a target="_blank" href=""> </a></div>
<div id="facebook"><a target="_blank" href=""> </a></div>
<div id="twitter"><a target="_blank" href=""> </a></div>
<div id="youtube"><a target="_blank" href=""> </a></div>
<div id="vimeo"><a target="_blank" href=""> </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 样式或将 hover 样式应用到每个单独的 id，就可以完成。
我可能在这里漏掉了一个技巧。感谢您的帮助。
最佳答案
已编辑
将您的父 div ID 更改为类，并为 :hover 提供第二个。
<div id="connections">
<div class="googleplus connections"><a target="_blank" href=""> </a></div>
<div class="facebook connections"><a target="_blank" href=""> </a></div>
<div class="twitter connections"><a target="_blank" href=""> </a></div>
<div class="youtube connections"><a target="_blank" href=""> </a></div>
<div class="vimeo connections"><a target="_blank" href=""> </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 to show what I mean (感谢开胃菜，约瑟夫)
关于CSS 继承问题 - 标记背景位置，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/16573419/