javascript - 如何将 li 文本添加到悬停 jQuery 上的元素

Question

我想创建类似于此网站的专业知识部分的内容:http://www.theelixirhaus.com/

基本上我只是希望特定的文本出现在 <h2> 内的图标上方。当您将鼠标悬停在它们上方时。每个图标悬停都会将不同的文本带到同一位置。我附上了一个 JSBin 和我目前拥有的东西。我不确定是否 <p> li 内是正确的使用方式，以及如何获取它并将其显示在 h2 中。

https://jsbin.com/cefuboxoje/edit?html,css,js,output

Answer 1

演示:http://jsfiddle.net/swm53ran/388/

如果您想保留对悬停的原始使用，请使用 .hover()而不是.on('hover', function() {})

另外，您想使用$(this).find('skills-title').html()获取 <p> 内的值文本标签。

我用过.mouseenter()和.mouseleave()函数，这样当您没有将鼠标悬停在元素上时，<h4>文本将被清除。

$(document).ready(function() {
    $(".skills").on('mouseenter',function (){
        var title = $(this).find('.skills-title').html();
        $(".title-shown").html(title);
    }).on('mouseleave', function() {
        $(".title-shown").html('');
    });
});

ps。你有一个额外的class="skills"在你原来的 jsbin 演示中的第一个 <li> 。在这种情况下，这不会改变任何事情，只是友好地提醒您检查您的代码。