个人中心
文章发布
退出
作者热门文章
- html - 出于某种原因，IE8 对我的 Sass 文件中继承的 html5 CSS 不友好？
- JMeter 在响应断言中使用 span 标签的问题
- html - 在 :hover and :active? 上具有不同效果的 CSS 动画
- html - 相对于居中的 html 内容固定的 CSS 重复背景？
24
4
我有一个 CSS 过渡可以在悬停时放大图像，但是我希望悬停效果在一定时间后简单地停用。原因是悬停效果通过点击在移动设备上激活，但即使您点击屏幕上的其他地方它也永远不会停用，除非您点击另一个图像或链接然后激活该悬停事件。这是我的 CSS:
.effectfront {
border: none;
margin: 0 auto;
}
.effectfront:hover {
-webkit-transform: scale(12);
-moz-transform: scale(12);
-o-transform: scale(12);
transform: scale(12);
transition: all 0.5s;
-webkit-transition: all 0.5s;
padding: 2px;
background: rgba(0,0,0,0.5);
border:1px solid rgba(0,0,0,1);
} <body><img class="effectfront" style="width:50px" src="https://sharetribe.s3.amazonaws.com/images/listing_images/images/100255/big/b4b8ry-cuaav_os.jpg?1427485186"style=height:80%> </body>是否有仅使用 CSS 的解决方法？还是需要 Javascript？
最佳答案
在您的 .effectfront 类中设置过渡
.effectfront {
border: none;
margin: 0 auto;
-webkit-transition: all 0.5s ease; /* Safari and Chrome */
-moz-transition: all 0.5s ease; /* Firefox */
-o-transition: all 0.5s ease; /* IE 9 */
-ms-transition: all 0.5s ease; /* Opera */
transition: all 0.5s ease;
}
.effectfront:hover {
-webkit-transform: scale(12);
-moz-transform: scale(12);
-o-transform: scale(12);
transform: scale(12);
padding: 2px;
background: rgba(0,0,0,0.5);
border:1px solid rgba(0,0,0,1);
} <body><img class="effectfront" style="width:50px" src="https://sharetribe.s3.amazonaws.com/images/listing_images/images/100255/big/b4b8ry-cuaav_os.jpg?1427485186"style=height:80%> </body>关于CSS3 过渡 :hover effect reverse animation after a time，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/30015727/
24
4
0
我是一名优秀的程序员,十分优秀！