Question

我使用div的过渡效果使其在向下滚动时平滑变化，但我不想在鼠标悬停或鼠标移出时使用此过渡效果，因为div用作按钮。我可以通过鼠标忽略这个效果，但我无法为鼠标做任何事情：

HTML代码：

<div class="navButton"></div>

CSS：

.navButton {
    position: absolute;
    top:10px;
    -webkit-transition: all 0.5s ease-in-out;
    -moz-transition: all 0.5s ease-in-out;
    -o-transition: all 0.5s ease-in-out;
    -ms-transition: all 0.5s ease-in-out;
    transition: all 0.5s ease-in-out;
}
.navButton.scroll {
    top:100px;
}
.navButton:hover {
    cursor: pointer;
    -webkit-transition: none;
    -moz-transition: none;
    -o-transition: none;
    -ms-transition: none;
    transition: none;
}

和jQuery代码：

$(function() {
      $(window).scroll(function(event){
        if($(this).scrollTop() > 400){
            $('.navButton').addClass('scroll');
        }; 
      });
});

Answer 1

一种选择是在mouseover / mouseout上切换课程：

Updated Example

$('.navButton').on('mouseover mouseout', function () {
    $(this).toggleClass('no-transition');
});

.no-transition {
    -webkit-transition: none;
    -moz-transition: none;
    -o-transition: none;
    -ms-transition: none;
    transition: none;
}

您也可以只转换top属性：

Updated Example

.navButton {
    position: absolute;
    top:10px;
    -webkit-transition: top 0.5s ease-in-out;
    -moz-transition: top 0.5s ease-in-out;
    -o-transition: top 0.5s ease-in-out;
    -ms-transition: top 0.5s ease-in-out;
    transition: top 0.5s ease-in-out;
}

Answer 2

如果您只是尝试将转换应用于top增加，则可以定位top all的{{1}}：JS Fiddle

  -webkit-transition: top 0.5s ease-in-out;
    -moz-transition: top 0.5s ease-in-out;
    -o-transition: top 0.5s ease-in-out;
    -ms-transition: top 0.5s ease-in-out;
    transition: top 0.5s ease-in-out;

使用css对鼠标移除和鼠标移除没有过渡效果

2 个答案: