CSS:我可以为图像颜色更改悬停效果添加轻松过渡吗?
Posted
技术标签:
【中文标题】CSS:我可以为图像颜色更改悬停效果添加轻松过渡吗?【英文标题】:CSS: Can I add ease transition to image color change hover effect? 【发布时间】:2015-10-22 12:38:03 【问题描述】:我创建了一个简单的效果,使图像在悬停时改变颜色。现在我想添加过渡计时功能属性,以便颜色过渡淡入淡出,而不是立即改变,但我似乎无法让它工作。有什么想法吗?
代码如下:
div
position: relative;
display: inline-block;
-webkit-transition: all 500ms ease-out 1s;
-moz-transition: all 500ms ease-out 1s;
-o-transition: all 500ms ease-out 1s;
transition: all 500ms ease-out 1s;
img
width: 100%;
height: 100%;
div:hover::after
position: absolute;
z-index: 1;
background-color: Indigo;
opacity: 0.4;
left: 0;
top: 0;
height: 100%;
width: 100%;
content: '';
谢谢!
【问题讨论】:
【参考方案1】:你的代码有两个问题:
::after
选择器作为一个单独的元素工作,因此 div
上的转换不起作用,它们需要应用于 ::after
。
:hover::after
选择器需要一些东西来转换从。
这应该可行:
div
position: relative;
display: inline-block;
img
width: 100%;
height: 100%;
div::after
-ms-transition: all 500ms ease-out 1s;
transition: all 500ms ease-out 1s;
position: absolute;
z-index: 1;
background-color: transparent;
opacity: 0.4;
left: 0;
top: 0;
height: 100%;
width: 100%;
content: '';
div:hover::after
background-color: Indigo;
【讨论】:
谢谢@DisgruntledGoat!【参考方案2】:有人还与我分享了这段代码,似乎通过将图像包装在跨度类中来做同样的事情:
.imghov
display: inline-block;
background-color: #fff;
-moz-transition: all 0.3s linear;
-ms-transition: all 0.3s linear;
-o-transition: all 0.3s linear;
-webkit-transition: all 0.13ss linear;
transition: all 0.3s linear;
.imghov img
opacity: 1;
-moz-transition: all 0.3s linear;
-ms-transition: all 0.3s linear;
-o-transition: all 0.3s linear;
-webkit-transition: all 0.3s linear;
transition: all 0.3s linear;
.imghov:hover
background-color: indigo;
-moz-transition: all 0.3s linear;
-ms-transition: all 0.3s linear;
-o-transition: all 0.3s linear;
-webkit-transition: all 0.3s linear;
transition: all 0.3s linear;
imghov:hover,
.imghov:hover img
opacity: 0.6;
-moz-transition: all 0.3s linear;
-ms-transition: all 0.3s linear;
-o-transition: all 0.3s linear;
-webkit-transition: all 0.3s linear;
transition: all 0.3s linear;
【讨论】:
如果:hover
状态与非悬停状态相同,则不需要转换。现在也只需要-ms-
前缀,Opera/Firefox/Webkit都支持正则语法。以上是关于CSS:我可以为图像颜色更改悬停效果添加轻松过渡吗?的主要内容,如果未能解决你的问题,请参考以下文章
text 使用此Transition SCSS Mixin将CSS过渡添加到元素。轻松设置颜色,宽度和填充等属性的动画,以创建淡入淡出效果