When scrolling down, I've added a transition effect to smoothly change a div element. However, I want to avoid this transition effect when hovering over or moving the mouse out as the div is acting as a button. While I was successful in removing the effect for hover, I couldn't figure out how to address it for mouse out:
Here's the HTML Code:
<div class="navButton"></div>
Corresponding 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;
}
Additionally, jQuery code snippet:
$(function() {
$(window).scroll(function(event){
if($(this).scrollTop() > 400){
$('.navButton').addClass('scroll');
};
});
});