Javascript 使用css对鼠标移动和鼠标移出没有过渡效果

我对div使用过渡效果，使其在向下滚动时平滑地更改，但我不希望在将div用作按钮时将鼠标悬停或移出时使用此过渡效果。我可以忽略鼠标悬停的效果，但我不能为鼠标悬停做任何事情：

HTML代码：

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

和jQuery代码：

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

---

一个选项是在

mouseover

/

mouseout

上切换类：

---

您也可以只转换

top

属性：

---

如果您仅尝试将转换应用于

top

增加，则可以将

top

intead作为

all

的目标：

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

$('.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;
}

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

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