Question

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

Answer 1

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

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

1 个答案: