html - CSS Transition 不适用于我的网站，但适用于 codepen

Question

我有一个简单的 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 中尝试过这个。

Answer 1

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