no transition effect on mouse over and mouse out with css

I use transition effect for a div to make it change smoothly on scroll down, but I don't want this transition effect to be used when I mouse over or mouse out as the div is used as a button. I could omit this effect from mouse over, but I couldn't do anything for mouse out:

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

HTML Code:

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

and jQuery code:

和jQuery代码:

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

2 个解决方案

#1

One option would be to toggle a class on mouseover/mouseout:

一种选择是在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;
}

---

You could alternatively, just transition the top property:

您也可以转换*属性:

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

#2

If you are only trying to apply the transition to the top increase, you can target top intead of all:JS Fiddle

如果您只是尝试将过渡应用于最高增量,则可以定位所有的*内容: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;