下面是我如何在悬停时缩放图像:
img {
transition: 0.25s ease;
}
img:hover {
transform: scale(0.75);
transition: 0.25s ease;
}
下面是我如何交叉淡入淡出两个图像:
#cf {
position:relative;
margin:0 auto;
}
#cf img {
position:absolute;
left:0;
-webkit-transition: opacity 1s ease-in-out;
-moz-transition: opacity 1s ease-in-out;
-o-transition: opacity 1s ease-in-out;
transition: opacity 1s ease-in-out;
}
#cf img.top {
-webkit-transition: opacity 1s ease-in-out;
-webkit-animation: fade 5s infinite;
}
@-webkit-keyframes fade {
0% {opacity: 0;}
50% {opacity: 1;}
100% {opacity: 0;}
}
https://jsfiddle.net/1n279ct8/
这是我尝试将两者结合起来时得到的结果:
https://jsfiddle.net/h453xaav/
哎呀!它仅将“顶层”层视为可悬停层。
这种行为对我来说绝对有意义,但令人沮丧的是,我看不到优雅的解决方法。
在纯 CSS 中是否可行,或者我是时候打破 JavaScript 了吗?
提前谢谢你:-)
附言我使代码尽可能简单。在我的实际工作中,我使用 id 和类并为不同的浏览器做案例,但为了尽可能清楚地传达我的意思,我在这里删掉了一些内容。这是我在这里的第一篇文章,所以我不确定房子的风格。请让我知道我是否应该使其“完整”或只是“概念证明”以传达信息:-)
附言如果我处理这两种效果的 CSS 的方式已经不正确或“狡猾”,请告诉我!
最佳答案
你不能同时悬停两个实例,你只能悬停一个元素,以及它的父元素(而不是它的兄弟元素)。
解决方法是将两个图像包装在一个 div 中(将其视为父元素)。然后缩放 div 的内容。
结果可以在下面的 fiddle 中看到:
#wrap:hover {
transform: scale(0.75);
-webkit-transform: scale(0.75);
transition: 0.25s ease;
}
#wrap {
position: relative;
transition: 0.25s ease;
background: red;
/* remove this colour, this is just to help show the div shrinking*/
width: 292px;
/* this needs to be defined */
height: 291px;
}
img.top {
position: absolute;
left: 0px;
-webkit-transition: opacity 1s ease-in-out;
-webkit-animation: fade 5s infinite;
transition: 0.25s ease;
}
@-webkit-keyframes fade {
0% {
opacity: 0;
}
50% {
opacity: 1;
}
100% {
opacity: 0;
}
}
<div id="wrap">
<img class="bottom" src="http://i.imgur.com/qiupijw.png" />
<img class="top" src="http://i.imgur.com/IAUlHar.png" />
</div>
关于CSS 在悬停时缩放图像并结合定时淡入淡出,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/29909631/