使图像出现在悬停的图像的其他位置答案

【问题标题】：Make an image appear somewhere else to the image that is hovered over使图像出现在悬停的图像的其他位置
【发布时间】：2015-12-16 15:16:10
【问题描述】：

当它悬停时，我需要让另一张图片出现在我现在拥有的图片上方。

这是我目前所拥有的：

<p>
<a href="https://twitter.com/georgevere12">
<img    alt="Twitter Link" 
        src="images/buttons/./twitter.png"
        style="position:absolute; 
        top: 85%; 
        left: 11%; 
        width: 5.5%; 
        height: 10%; 
        border: none;"
        onmouseover="this.src='images/buttons/./twitter-hover.png';" 
        onmouseout="this.src='images/buttons/./twitter.png';" />
</a>

这会像我想要的那样改变链接的颜色，但现在我想要另一个图像同时悬停在它上面。有什么想法吗？

【问题讨论】：

标签： html css image hover

【解决方案1】：

您只能使用 css 来完成。使用精灵图像并定位它。

演示

.twitter{
  display:block;
  border:1px solid red;
  width: 30px;
  height:30px;
  background-image:url(http://i.imgur.com/qM7IYaM.png?1);
  background-position:-32px 31px;
  transition:1s;
}

.twitter:hover{
   background-position:-32px 63px;  
}

<a href="https://twitter.com/georgevere12" class="twitter">
  
</a>

【讨论】：

我认为过渡有点矫枉过正。