长方体-阴影过渡不起作用
长方体-阴影过渡不起作用
提问于 2013-05-14 01:20:49
我想要一个框阴影出现在悬停和过渡到它。我有下面的课程。阴影出现，但没有过渡。
我在chrome浏览器中查看它，可以看到在开发人员工具中应用了悬停和非悬停状态的转换。
.node{
-webkit-transition: box-shadow .25s linear;
-moz-transition: box-shadow .25s linear;
-ms-transition: box-shadow .25s linear;
-o-transition: box-shadow .25s linear;
transition: box-shadow .25s linear;
}
.node:hover{
box-shadow: 3px 3px 5px rgba(0, 0, 0, 0.3);
}现在有一个转折。如果我将转换属性应用于在容器上设置的ID，那么它就可以工作！？使用ID在元素上设置转换与使用类设置转换有什么区别？
回答 3
Stack Overflow用户
回答已采纳
发布于 2013-05-14 02:09:25
我同意山姆的观点，似乎有什么东西压倒了风格。尝试使用更具体的选择器。
例如，如果你的HTML是这样设置的：
<div class="item">
<a class="node">Info</a>
</div>尝试使用更具体的选择器，如下所示：
.item a.node:hover {
box-shadow: 3px 3px 5px rgba(0, 0, 0, 0.3);
}我希望这能有所帮助。
Stack Overflow用户
发布于 2019-09-16 07:25:57
您可能要在悬停操作之前将box-shadow属性设置为0 0 0
.node{box-shadow: 0 0 0 rgba(0, 0, 0, 0.3);}
.node:hover{box-shadow: 3px 3px 5px rgba(0, 0, 0, 0.3);}就这样
Stack Overflow用户
发布于 2013-10-21 17:13:59
.node:hover{
box-shadow: 3px 3px 5px rgba(0, 0, 0, 0.3);
-webkit-transition: .25s linear 0s;
-moz-transition: .25s linear 0s;
-o-transition: .25s linear 0s;
transition: .25s linear 0s
}试试这个吧。它是有效的。
页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持
原文链接：
https://stackoverflow.com/questions/16527624
复制相关文章
相似问题
腾讯云开发者
