对鼠标悬停没有过渡效果，并用css鼠标悬停

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增加，可以针对这一翻译all的top：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;