CSS 过渡不适用于我的网站，但适用于 codepen答案

【问题标题】：CSS Transition not working on my website but works on codepenCSS 过渡不适用于我的网站，但适用于 codepen
【发布时间】：2018-07-25 16:13:33
【问题描述】：

我有一个简单的 CSS 过渡，当您将鼠标悬停在按钮上时，它会缓和到框阴影中。但由于某种原因，转换在我的网站上不起作用。我的网站上有其他 CSS 过渡效果很好，但这个很难。有什么可能阻止过渡吗？ :hover 立即反对使用我想要的缓和效果。

我正在使用 Sass，但我不确定这是否会有所不同：

.btn.btn-more {
    background: none;
    border: 1px solid #dadada;
    color: #555;
    font-size: 14px;
    font-weight: bold;
    margin-top: 10px;
    min-width: 130px;
    padding-top: 10px;
    padding-bottom: 10px;
    transition: all 0.5s ease-in-out;
    -moz-transition: all 0.5s ease-in-out;
    -webkit-transition: all 0.5s ease-in-out;
    -o-transition: all 0.5s ease-in-out;
    -ms-transition: all 0.5s ease-in-out;
    vertical-align: middle;

    &:hover {
        box-shadow: 0 1px 4px #999;
    }
}

该站点使用的是 Bootstrap 2.3.2，这是 .btn 的来源。我已经在 Chrome 和 Safari 中尝试过这个。

【问题讨论】：

在将 sass/scss 文件上传到您的网站之前，您是否将其处理为 css？
@dwjohnston 这是在本地环境中自动处理 SCSS。我对按钮的 CSS 所做的所有更改都会生效，但过渡除外。
你可以尝试做一个嵌套选择器 - 只是为了检查 sass 是否正确处理？例如。 div { &.foo {color: red;}}
@dwjohnston 我刚刚发现了这个问题。 .btn 覆盖了转换。不知道为什么或如何，但直到我在新标签页中打开页面时它才显示在 chrome 中。感谢您的帮助。

标签： html css sass css-transitions

【解决方案1】：

.btn 正在覆盖转换，Chrome 开发工具没有显示该覆盖，直到我在新选项卡中打开页面并再次打开开发工具。

【讨论】：