對鼠標懸停沒有過渡效果，並用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;