我想做的是创建交叉渐变图像的悬停效果。所以,我们有两个图像:img-2 和 img-1,以及前面的文本,所以图层是 [img2]>[img1]>[text]。当我将鼠标悬停在文本层或前面的图像层时,两个图像应该相互淡入淡出,因此现在的层是:[img1]>[img2]>[文本]。我要应用的过渡方向是从下到上。我可以用纯 CSS 来做,还是应该使用 JQuery?谢谢
最佳答案
.box{
overflow: hidden;
position: relative;
background: #780;
width: 250px;
height: 250px;
}
.boxBg{
position: absolute;
margin-top: 100%; /* note this */
transition: 0.4s; /* this */
background: #a44;
width: inherit;
height: inherit;
}
.box:hover .boxBg{
margin-top: 0; /* and this */
}
.boxText{
position: absolute;
text-align: center;
height: inherit;
width: inherit;
color: #fff;
font: 200 20px/220px Helvetica, Arial, sans-serif;
}
<div class="box">
<div class="boxBg"></div>
<div class="boxText"><p>Hello World</p></div>
</div>
关于jquery - 悬停效果(淡入淡出图像)方向,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/27130135/