4

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

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

4

3 回答 3

3

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

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

我希望这会有所帮助。

于 2013-05-13T18:09:25.343 回答
1

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

就这样

于 2019-09-15T23:25:57.047 回答
0 
.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
}

试试这个。其作品。

于 2013-10-21T09:13:58.707 回答