为什么我的 hover() 没有按预期工作？当我滚动图像时，它会多次附加和删除 div

Question

所以想法是这样的：当我将鼠标悬停在任何图像上时，jQuery 应该在图像上附加一个带有 .blackDiv 类的 div 并将其变为黑色，然后当我将鼠标悬停时，应该删除 div 以使图像再次可见。然而到目前为止，当我将鼠标移到图像上时，div 会被多次附加和删除，从而产生闪烁效果。这是我的代码：

HTML

echo    "<div class='imageContainer'>" 
                ."<h1>".$row["name"].'</h1>' 
                .'<div class="stickyImageContainer"><a href="imageInfo.php?image='.$row["path"].'"><img class="uploadedImg" src="/uploads/'.$row["path"] .'" alt="Random image" /></a> ';

    if (isset($_SESSION['id'])) {
        if ($hasVoted < 1) {
            echo    "<div class='upvoteDownvoteRatingContainer'>
                    <form class='upvoteImage' method='POST' action=''>
                        <input type='hidden' name='action' value='upvote'>
                        <input type='hidden' name='id' value='".$row['id']."'>
                        <input type='hidden' name='userId' value='".$currentUser."'>
                        <input type='hidden' name='voteType' value='voteImage'>
                        <button class='upvoteImageButton' type='submit' name='upvoteImage'><img class='arrowUp' src='../images/Social Media/arrowUp.png' alt='submit'></button>
                    </form>";

            echo "<div class='ratingNumber'>";
                if ($row['upvotes'] - $row['downvotes'] <= 0) {
                    echo "<p>0</p>";
                } else {
                    echo $row['upvotes'] - $row['downvotes'];
                }

            echo "</div>";

            echo    "<form class='downvoteImage' method='POST' action=''>
                        <input type='hidden' name='action' value='downvote'>
                        <input type='hidden' name='id' value='".$row['id']."'>
                        <input type='hidden' name='userId' value='".$currentUser."'>
                        <input type='hidden' name='voteType' value='voteImage'>
                        <button class='downvoteImageButton' type='submit' name='downvoteImage'><img class='arrowDown' src='../images/Social Media/arrowDown.png' alt='submit'></button>
                    </form></div>";

JavaScript

$('.uploadedImg').hover(function(){
        var image = $(this);
        var imageParent = image.closest('.stickyImageContainer');
        imageParent.append('<div class="blackDiv">bye world</div>');
    }, function() {
        var image = $(this);
        var imageParent = image.closest('.stickyImageContainer');
        imageParent.find('.blackDiv').remove();
    });

Answer 1

当div 被附加到图像顶部时，它会在图像和光标之间，导致光标悬停图像，从而导致要运行的另一个函数会删除div，这会导致光标悬停在图像上，这会导致第一个函数插入div，然后您会看到循环......这会导致闪烁效果。

要解决此问题，请附加 .uploadedImg 上的 mouseenter 事件和插入的 div 本身上的 mouseleave 事件。

这样，

$('.imageContainer').on('mouseenter', '.uploadedImg', function(){
  var image = $(this);
  var imageParent = image.closest('.stickyImageContainer');
  imageParent.append('<div class="blackDiv">bye world</div>');
}).on('mouseleave', '.blackDiv', function() {
  $(this).remove();
});