google-chrome - 框阴影过渡不起作用

Question

我希望在悬停时出现一个框阴影并过渡到它。我有下面的类(class)。阴影出现，但没有过渡。

我在 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 和类在元素上设置转换有什么区别？

Answer 1

我同意 Sam 的观点，似乎有某种东西凌驾于风格之上。尝试使用更具体的选择器。

例如，如果您的 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);
}

希望对您有所帮助。