jQuery mouseenter只是閃爍的img

我正在一個項目中，我想要顯示一個圖像，當鼠標移動到圖像上時，圖像消失，頁面上的信息出現。當鼠標移出元素時，圖像重新出現。我使用的是mouseenter和mouseleave，但如果鼠標移動得很輕微，圖像仍會閃爍。jQuery mouseenter只是閃爍的img

$(".second-div").mouseenter(function() { 
 
    $(this).removeClass("second-div"); 
 
}); 
 
$(".second-div").mouseleave(function() { 
 
    $(this).addClass("second-div"); 
 
});

.first-div { 
 
    height: 200px; 
 
    width: 300px; 
 
    border: 1px solid black; 
 
} 
 

 
.second-div { 
 
    height: 200px; 
 
    width: 300px; 
 
    border: 1px solid red; 
 
    position: relative; 
 
    bottom: 201px; 
 
    background-image: url(https://image.freepik.com/free-vector/nature-background-of-a-grassy-landscape_1048-1305.jpg); 
 
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script> 
 

 
<div class="first-div"> 
 

 
</div> 
 

 
<div class="second-div"> 
 

 
</div>

這裏是的jsfiddle：

https://jsfiddle.net/cjbruin/t78v7tyj/

來源

2017-05-11 Colin Bruin

爲什麼沒有您的演示符合您的問題的代碼？爲什麼使用JS呢？ –

可能是因爲內容不見了，所以它消失了，並導致休假... – epascarello

我更新了代碼。對不起復制了錯誤的演示。 –

沒有必要對JS或jQuery的，你可以用CSS做到這一點。只需撥動上:hover

.first-div { 
 
    height: 200px; 
 
    width: 300px; 
 
    border: 1px solid black; 
 
} 
 

 
.second-div { 
 
    height: 200px; 
 
    width: 300px; 
 
    border: 1px solid red; 
 
    position: relative; 
 
    bottom: 201px; 
 
    background-image: url(https://image.freepik.com/free-vector/nature-background-of-a-grassy-landscape_1048-1305.jpg); 
 
    transition: opacity .25s; 
 
} 
 

 
.second-div:hover { 
 
    opacity: 0; 
 
}

<div class="first-div"> 
 
    content 
 
</div> 
 
<div class="second-div"> 
 
</div>

來源

2017-05-11 21:36:52

我同意CSS的解決方案是更好的和更清潔的頂級元素的透明度。但是，下面是我相信你試圖用jQuery來完成的事情。

在您的原始問題中，您正在添加/刪除造成您的鼠標事件不規律地觸發的類。

$(".second-div").mouseenter(function() { 
 
    $(".second-div").hide(); 
 
}); 
 
$(".first-div").mouseleave(function() { 
 
    $(".second-div").show(); 
 
});

.first-div { 
 
    height: 200px; 
 
    width: 300px; 
 
    border: 1px solid black; 
 
} 
 

 
.second-div { 
 
    height: 200px; 
 
    width: 300px; 
 
    border: 1px solid red; 
 
    position: relative; 
 
    bottom: 201px; 
 
    background-image: url(https://image.freepik.com/free-vector/nature-background-of-a-grassy-landscape_1048-1305.jpg); 
 
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script> 
 

 
<div class="first-div"> 
 

 
</div> 
 

 
<div class="second-div"> 
 

 
</div>

來源

2017-05-11 21:53:57

是的，這正是我想要的，我不知道爲什麼我沒有嘗試隱藏和表演。謝謝！ –

試試這個： https://jsfiddle.net/houtan/mc4vLgev/

$("#parentDiv").mouseenter(function() { 
 
    var hasDiv = $("#secondDiv").hasClass("second-div").toString(); 
 
    $("#result1").html("is hover: " + hasDiv); 
 
    $("#secondDiv").removeClass("second-div"); 
 
}); 
 
$("#parentDiv").mouseleave(function() { 
 
    var hasDiv = $("#secondDiv").is(".second-div").toString(); 
 
    $("#result1").html("is hover: " + hasDiv); 
 
    if (hasDiv==="false") 
 
    { 
 
    \t \t $("#secondDiv").addClass("second-div"); 
 
    } 
 
});

#parentDiv { 
 
    width: 300px; 
 
    height: 200px; 
 
} 
 

 
.first-div { 
 
    height: 200px; 
 
    width: 300px; 
 
    border: 1px solid black; 
 
} 
 

 
.second-div { 
 
    height: 200px; 
 
    width: 300px; 
 
    border: 1px solid red; 
 
    position: relative; 
 
    bottom: 201px; 
 
    background-image: url(https://image.freepik.com/free-vector/nature-background-of-a-grassy-landscape_1048-1305.jpg); 
 
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 
<div id="parentDiv"> 
 
<div id="firstDiv" class="first-div"> 
 

 
</div> 
 

 
<div id="secondDiv" class="second-div"> 
 

 
</div> 
 
</div> 
 
<div id="result1">is hover: </div> 
 
<script> 
 
</script>

來源

2017-05-11 22:26:24 Houtan

jQuery mouseenter只是閃爍的img

回答

相關問題