Jquery mouseenter mouseleave 无法正常工作

Question

当鼠标悬停时，我正在尝试从缩略图中移动 wp 插件的标题，并通过此脚本将它们放在顶部的另一个 div 中：

$(document).ready(function() {

  $(".caption").mouseenter(function() {

    $(".captiondiv").html("");

    var str = $(".caption-title:visible").text();

    $(".captiondiv").prepend(str);

  }).mouseleave(function() {

    $(".captiondiv").html("");

  });
});

效果很好，当我将鼠标缓慢悬停在每个缩略图上时，标题在左上角的视频中正确显示：

https://www.youtube.com/watch?v=2DKDq0RNJM4&feature=youtu.be

如果我快速悬停，脚本会显示错误的字幕，它会留下以前的字幕并添加新的:(

https://www.youtube.com/watch?v=GAK0LhkwUbI&feature=youtu.be

我真的迷路了！请帮忙！

最好的问候！

Answer 1

$("ul li img").hover(
    function(){
        var alt = $(this).attr("alt");
        $("strong").html(alt);
    },
    function(){
        $("strong").html("");
    }
);

ul{
    list-style-type:none
}
ul li{
    float:left  
}
ul li img{
    /* grayscale effect */
    -webkit-filter: grayscale(1); 
       -moz-filter: grayscale(1); 
         -o-filter: grayscale(1); 
        -ms-filter: grayscale(1); 
            filter: grayscale(1);
}
ul li img:hover{
    /* clear grayscale effect */
    -webkit-filter: none; 
       -moz-filter: none; 
         -o-filter: none; 
        -ms-filter: none; 
            filter: none;
    /* set 3s animate */
    -webkit-transition: all .3s ease-in-out;
       -moz-transition: all .3s ease-in-out;
         -o-transition: all .3s ease-in-out;
        -ms-transition: all .3s ease-in-out;
            transition: all .3s ease-in-out;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.2.3/jquery.min.js"></script>
<span>Title:</span>
<strong></strong>

<ul>
    <li><img src='https://cdn3.iconfinder.com/data/icons/blackblue/128/iPhoto.png' alt='1'></li>
    <li><img src='https://cdn1.iconfinder.com/data/icons/DarkGlass_Reworked/128x128/apps/sodipodi.png' alt='2'></li>
    <li><img src='https://cdn0.iconfinder.com/data/icons/IS_CMS/128/image.png' alt='3'></li>
    <li><img src='https://cdn3.iconfinder.com/data/icons/flatforlinux/128/7-Image%20capture.png' alt='4'></li>
    <li><img src='https://cdn1.iconfinder.com/data/icons/fs-icons-ubuntu-by-franksouza-/128/image-png.png' alt='5'></li>
    <li><img src='https://cdn3.iconfinder.com/data/icons/humano2/128x128/apps/synfig_icon.png' alt='6'></li>
    <li><img src='https://cdn1.iconfinder.com/data/icons/nuvola2/128x128/filesystems/folder_image.png' alt='7'></li>
    <li><img src='https://cdn2.iconfinder.com/data/icons/oxygen/128x128/mimetypes/image-png.png' alt='8'></li>
</ul>

---

EXAMPLE