我对 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');
};
});
});
最佳答案
一个选项是在 mouseover
/mouseout
上切换类:
$('.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
属性:
.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;
}
关于javascript - 使用 css 对鼠标悬停和鼠标移出没有过渡效果,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/28931985/