悬停只适用于图像的一半

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

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>

来源

2015-11-19 newsoul

这是决定图像定位的部分：'background-position：5px -20px;'。只是摆弄它，直到它在正确的位置。这只是一个猜测，但请尝试'background-position：5px 0;'而不是。 – jperezov

'元素不再存在，并且您没有正确关闭div和图片标签。 – j08691

明白了！多谢你们！！ – newsoul

改变你的background-position财产。

background-position: xpox ypos;

来源

2015-11-19 23:14:03 Rcls

当试图根据悬停来更改图像时，它也有助于使非悬停状态也使用背景图像。这样你只需要让它改变悬停的背景图像。

请参阅以下的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类是纯粹为了便于观察白色图标。

来源

2015-11-19 23:25:08

悬停只适用于图像的一半

回答

相关问题