Question

我有一个社交媒体按钮链接集，我想改变背景图像上的位置。这是我的代码： 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; }

可以在本页底部看到此预览 - ＆gt; http://www.bokehcreative.co.uk/about.php

如果我将！important应用于：悬停样式或将悬停样式应用于每个个人ID，则可以这样做。

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

Answer 1

<强> EDITED

将您的父div ID更改为类，并为: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 to show what I mean（感谢首发，约瑟夫）

CSS继承问题 - 标记背景位置

1 个答案: