盒子阴影过渡效果无法正常工作

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与类有什么区别？

- Vytas Bradunas

---

似乎对我有效（http://jsfiddle.net/u6438/1/）。你确定没有任何覆盖它的东西吗？ - Sam

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);
}

我希望这能有所帮助。

- Gene Parcellano

---

那确实有效。不过很奇怪，因为开发控制台显示在悬停和非悬停状态下都应用了所有内容。你有什么想法为什么开发控制台会撒谎？ - Vytas Bradunas

你有应用一些CSS重置吗？如果你也有一个通用的样式，比如a {...}我相信它会覆盖所有<a>标签的样式。 - Gene Parcellano

如果你不在fiddle或类似的平台上分享你的代码，很难判断。 - vals

Vytas，理论上应该可以，但我曾经遇到过一些奇怪的事情，在（Google Chrome）控制台中没有任何线索。所以我不得不假设问题是什么，并进行测试。我发现这篇文章很有帮助http://css-tricks.com/specifics-on-css-specificity/。 - Gene Parcellano

Answer 2

在悬停操作之前，您可以将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);}

那就这样了

- LeMatsacaret

Answer 3

.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
}

试试这个。它有效。

- Prodip