使用 CSS 对鼠标悬停和鼠标退出没有过渡影响

no transition effect on mouse over and mouse out with css

本文关键字：鼠标 没有过 影响 退出 悬停 CSS 使用      更新时间：2023-09-26

>我对div 使用过渡效果以使它在向下滚动时平滑更改，但我不希望在将鼠标悬停或鼠标悬停时使用此过渡效果，因为div 用作按钮。我可以在鼠标悬停时省略这种效果，但我无法为鼠标输出做任何事情：

网页代码：

<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');
        }; 
      });
});

一种选择是在 mouseover/mouseout 上切换一个类：

更新的示例 

$('.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属性：

更新的示例

.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;
}

如果您只是尝试将过渡应用于top增加，则可以针对all ：JS Fiddle top

  -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;
相关文章：