Question

我需要让另一张图像出现在我现在悬停在其上方的图像上方。

这是我到目前为止所做的：

<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>

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

Answer 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>

将图像显示在悬浮在其上的图像的其他位置

1 个答案: