Question

我有这些社交媒体图标，当鼠标悬停在一个图标上时，它应该淡入另一个图标。我想到了这样的事情：
HTML：

<div class="socials">
    <img src="../images/fb.png" id="fb1" />
    <img src="../images/fb-hover.png" id="fb2" />
    <img src="../images/twitter.png" id="twitter1" />
    <img src="../images/twitter-hover.png" id="twitter2" />
    <img src="../images/insta.png" id="insta1"/>
    <img src="../images/insta-hover.png" id="insta2" />
</div>

CSS：

/*This is for letting them stack on each other*/
#fb2, #twitter2, #insta2 {
    display:none; 
    position:absolute;
}

/*Fade animation*/
#fb1:hover, #twitter1:hover, #insta1:hover {
    opacity: 0.0;
    transition: opacity .55s ease-in-out;
    -moz-transition: opacity .55s ease-in-out;
    -webkit-transition: opacity .55s ease-in-out;
}

或check this jsfiddle.

淡出效果正常。但是'背景'图像（所以'...- hover.png'图像）不会出现。我如何使这项工作？

谢谢！

Answer 1

如果在＃fb2，＃twitter2和#insta2上设置display to block，你可以看到问题 - 这就是定位。在您的解决方案中，您需要将每个悬停图标绝对定位在正常图标下。我不认为它可以灵活。

所以，我提出了一个更灵活的解决方案。

介绍这种语法：

<div class="socials">
    <div class="icon">
        <img src="http://sillyquark.com/images/fb.png" class="normal" />
        <img src="http://sillyquark.com/images/fb-hover.png" class="hover" />
    </div>
    <div class="icon">
        <img src="http://www.sillyquark.com/images/twitter.png" class="normal" />
        <img src="http://www.sillyquark.com/images/twitter-hover.png" class="hover" />
    </div>
    <div class="icon">
        <img src="http://www.sillyquark.com/images/insta.png" class="normal" />
        <img src="http://www.sillyquark.com/images/insta-hover.png" class="hover" />
    </div>
</div>

将每个图标放在一个带有.icon类的div中，然后放入两个图像。

将.icon div的位置设置为relative，以允许相对于.icon的绝对定位，而不是body元素。将每个图标的顶部和左侧设置为0px，并将过渡添加到所有图像。另外，将宽度添加到.icon和img。

.icon{
    float: left;
    position: relative;
    width: 45px;
    height: 45px;
    padding: 20px;
}

.icon img{
    transition: opacity .55s ease-in-out;
    -moz-transition: opacity .55s ease-in-out;
    -webkit-transition: opacity .55s ease-in-out;
    opacity: 1.0;
    position: absolute;
    width: 45px;
    top: 0;
    left: 0;
}

这就是你改变不透明度的方法。在正常情况下，将.icon .normal的不透明度设置为1.0，将.icon .hover的不透明度设置为0.0。在悬停时，请做对位。

.icon .hover { opacity: 0.0; }
.icon:hover .hover { opacity: 1.0; }
.icon:hover .normal { opacity: 0.0; }

查看演示http://jsfiddle.net/uUk6N/3/

的小提琴

交叉淡化图像社交媒体

1 个答案: