Question

我的页面底部有一些社交媒体图标。它们是png图像，我想在它们悬停时用不同的图像替换它们。我想使用here给出的第一个解决方案，并将两个图像放在一起。

然而，我无法将图像放在彼此之上。我不确定使用什么正确的定位才能使这项工作成功。有人能给我一个暗示吗？（对于使用JavaScript不感兴趣，我不知道它是如何工作的。

HTML

<div class="footer" align="center">
        <ul>
            <li>Follow Us:</li>
            <a><img src="Images/Social Icons/Facebook-Hover.png"><img src="Images/Social Icons/Facebook.png"></a>
            <a><img src="Images/Social Icons/Twitter-Hover.png"><img src="Images/Social Icons/Twitter.png"></a>
            <a><img src="Images/Social Icons/Instagram-Hover.png"><img src="Images/Social Icons/Instagram.png"></a>
            <a><img src="Images/Social Icons/Pinterest-Hover.png"><img src="Images/Social Icons/Pinterest.png"></a>| 
            <li><a>About Us</a></li> | 
            <li><a>Ask Us</a></li> | 
            <li><a>Contact Us</a></li>
        </ul>
</div>

CSS：

.footer {
    background-color: #061336;
    padding: 15px;
    padding-bottom: 25px;
    position: fixed;
    width: 100%;
    bottom: 0px;
}

.footer li {
    font-family: Roboto, Arial;
    margin-left: 10px;
    margin-right: 20px;
    display: inline-block;
    text-decoration: none;
    color: #ffffff;
    transition: ease-in-out all 200ms;
    -moz-transition: ease-in-out all 200ms;
    -webkit-transition: ease-in-out all 200ms;
    -o-transition: ease-in-out all 200ms;
}

.footer li:hover {
    opacity: .7;
    transition: ease-in-out all 200ms;
    -moz-transition: ease-in-out all 200ms;
    -webkit-transition: ease-in-out all 200ms;
    -o-transition: ease-in-out all 200ms;
}

.footer img {
    height: 25px;
    margin-left: 3px;
    margin-right: 3px;
    right: 13px;
    top: 6px;
    position: relative;
}

Answer 1

使用:first-child CSS选择器有一个非常简单的解决方案。

.footer ul a {
    display: block;
    position: relative;
    width: [your icon width]px;
    height: [your icon height]px;
}

.footer ul a img {
    position: absolute;
    top: 0;
    left: 0;
}

.footer ul a img:first-child {
    opacity: 0;
    z-index: 10;
    position: absolute;
    top: 0;
    left: 0;
}

.footer ul a:hover img:first-child {
    opacity: 0.7;
}

Answer 2

创建精灵表单图像 - 您可以在此处找到如何创建http://css-tricks.com/css-sprites/

的教程

Answer 3

这就是我要做的事情，因为这样我就不必为＆＃34; margin-top：-100px＆＃34;或者更糟糕的是，javascript。

＆＃13;

.myicon{
  width:50px;
  height:50px;
  background:red; 
  -moz-transition: background .25s ease-in-out;
  -webkit-transition: background .25s ease-in-out;
  transition: background .25s ease-in-out;
}
.myicon:hover{
  background:blue;
}

＆＃13;

<div class='myicon'></div>

＆＃13;

将两个图像放在另一个上面

3 个答案: