首页
学习
活动
专区
圈层
工具
发布
首页
学习
活动
专区
圈层
工具
MCP广场
社区首页 >问答首页 >长方体-阴影过渡不起作用

长方体-阴影过渡不起作用
EN

Stack Overflow用户
提问于 2013-05-14 01:20:49
回答 3查看 12K关注 0票数 4

我想要一个框阴影出现在悬停和过渡到它。我有下面的课程。阴影出现,但没有过渡。

我在chrome浏览器中查看它,可以看到在开发人员工具中应用了悬停和非悬停状态的转换。

代码语言:javascript
运行
复制
.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在元素上设置转换与使用类设置转换有什么区别?

EN

Stack Overflow用户

回答已采纳

发布于 2013-05-14 02:09:25

我同意山姆的观点,似乎有什么东西压倒了风格。尝试使用更具体的选择器。

例如,如果你的HTML是这样设置的:

代码语言:javascript
运行
复制
<div class="item">
    <a class="node">Info</a>
</div>

尝试使用更具体的选择器,如下所示:

代码语言:javascript
运行
复制
.item a.node:hover {
    box-shadow: 3px 3px 5px rgba(0, 0, 0, 0.3);
}

我希望这能有所帮助。

票数 3
EN
查看全部 3 条回答
页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持
原文链接:

https://stackoverflow.com/questions/16527624

复制
相关文章

相似问题

领券
问题归档专栏文章快讯文章归档关键词归档开发者手册归档开发者手册 Section 归档