Question

我对编码非常陌生，所以我不知道出了什么问题...我有一个悬停的社交媒体图标，应该显示粉红色而不是白色，我通过使用除图像之外的第二张图像仅显示在下半部分。有什么想法吗？

CCS：

a.twitter:hover {
    background-image: url('http://www.new.sheisbiddy.com/wp-content/uploads/2015/11/twitter1.png');
    background-position: 5px -20px;
    background-repeat: no-repeat;
}

HTML：

<div class="social"><a class="twitter" href="http://twitter.com/" title="Twitter" alt="twitter"><center><img src="http://www.new.sheisbiddy.com/wp-content/uploads/2015/11/wtwitter.png" hspace="5"></a>

Answer 1

改变您的background-position财产。

background-position: xpox  ypos;

Answer 2

尝试基于悬停更改图像时，有助于使非悬停状态也使用背景图像。这样你只需要在悬停时改变背景图像。

请参阅以下JSFiddle：http://jsfiddle.net/dfhsps7d/

<style>
.social {
    background-color:grey;
}
a.twitter {
    background-image: url('http://www.new.sheisbiddy.com/wp-content/uploads/2015/11/wtwitter.png');
    display:block;
    width: 30px;
    height:30px;
}
a.twitter:hover {
    background-image: url('http://www.new.sheisbiddy.com/wp-content/uploads/2015/11/twitter1.png');
    background-repeat: no-repeat;
}
</style>

<div class="social">
    <a class="twitter" href="http://twitter.com/" title="Twitter" alt="twitter"></a>
</div>

请注意，第一个.social课程纯粹是为了方便查看白色图标。

悬停仅适用于图像的一半

2 个答案: