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

＆＃13;

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

＆＃13;

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;
}

＆＃13;

<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>

＆＃13;

EXAMPLE

Answer 2

而不是使用＆＃39; prepend＆＃39;方法使用.html（）方法来设置元素的内容。

Answer 3

如果要替换整个标题，请不要使用prepend。您可以使用$(".captiondiv").html(str);

修改问题是元素(".caption-title:visible")有多个值。它是使用$(this)元素来解决的，以获取想要的元素。

var str = $(this).find(".caption-title:visible").text(); $(".captiondiv").html(str);

Answer 4

这应该有效：

$(document).ready(function() {

  $(".jig-caption").mouseenter(function() {

    var str = $(".jig-caption-title:visible").text();

    $(".caption-perso").html(str);

  }).mouseleave(function() {

    $(".caption-perso").html("");

  });

});

Jquery mouseenter mouseleave无法正常工作

4 个答案: