盒子阴影过渡不起作用

Question

我希望鼠标悬停时出现一个框阴影并过渡到它。我有以下课程。阴影出现，但没有过渡。

我在 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

我同意萨姆的观点，似乎有一些东西压倒了风格。尝试使用更具体的选择器。

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

我希望这有帮助。