CSS Transition不在我的网站上工作,但在codepen上工作

时间:2018-02-15 00:01:16

标签: html css sass css-transitions

我有一个简单的CSS转换,当你将鼠标悬停在一个按钮上时,它会轻松进入框阴影。但出于某种原因,过渡并不适用于我的网站。我在我的网站上有其他CSS转换工作得很好,但这个很难。有什么可能阻止过渡吗? :hover立即反对使用像我的目标那样的缓和效果。

我使用的是萨斯,但我不确定这是否会产生影响:

.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中试过这个。

1 个答案:

答案 0 :(得分:0)

.btn覆盖过渡,Chrome开发工具没有显示覆盖,直到我在新标签页中打开页面并再次打开开发工具。