我无法显示任何笔，我只能描述这个bug。这是我的javascript：
$(".vetrina-deluxe-info-container-front").hover(function() {
$(this).closest('.js-in-viewport-hook').addClass("in-viewport");
}, function() {
$(this).closest('.js-in-viewport-hook').removeClass("in-viewport");
});
在任何这些元素的第一个.hover()上，该类被添加并立即删除。从第二次我悬停一切正常。
我也试过这段代码：
$(".vetrina-deluxe-info-container-front").mouseover(function() {
$(this).closest('.js-in-viewport-hook').addClass("in-viewport");
});
$(".vetrina-deluxe-info-container-front").mouseleave(function() {
$(this).closest('.js-in-viewport-hook').removeClass("in-viewport");
});
它具有完全相同的行为。我也试图改变.hover() div，看看是否有任何变化，但没有。任何想法或解决方法？
我试过不同的元素。
$('.test').mouseover(function(e){
console.log('ON');
$(this).removeClass('blue');
$(this).addClass('red');
}).mouseout(function(e){
$(this).removeClass('red');
console.log('OUT');
$(this).addClass('blue');
});
$('#test').mouseenter(function(e){
console.log('IN');
$(this).removeClass('red');
$(this).addClass('yellow');
}).mouseleave(function(e){
$(this).removeClass('yellow');
$(this).removeClass('yellow');
console.log('OUT');
$(this).addClass('red');
});.test{
width: 60%;
height: 60%;
margin: 10px auto;
}
.yellow{
background-color: yellow;
}
.red{
background-color: red;
}
.blue{
background-color: blue;
}<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<html>
<div class="test yellow">
<p>TEST</p>
</div>
</html>你的代码就像：
$(".vetrina-deluxe-info-container-front").mouseenter(function() {
$(this).closest('.js-in-viewport-hook').addClass("in-viewport");
}).mouseleave(function() {
$(this).closest('.js-in-viewport-hook').removeClass("in-viewport");
});
你试过这段代码了吗：
$(".vetrina-deluxe-info-container-front").hover(function() {
$(this).closest('.js-in-viewport-hook').toggleClass("in-viewport");
});
please check this i have added class on hover then i remove the class name when not hovered
<p>hover me.</p>
<script>
$("p").hover(function(){
$(this).css({"color":"blue"}).addClass('color-blue');
}, function(){
$("p").css({"color":"red"}).removeClass('color-blue');
});
</script>