php - 悬停功能显示产品标题

Question

我正在尝试使用 jquery 在悬停时显示从数据库返回的产品的标题。就目前而言，它可以工作，但会在悬停时显示列表中所有产品的标题，而不是悬停的产品标题。我只想显示激活悬停的产品。我试图插入变量但没有运气。就目前而言，下面的代码显示了图像悬停时的所有标题（headhighlight）（imagefeat）。

谢谢你的帮助。

jQuery

 <script type="text/javascript">
$(function() {
    $('.imagefeat,.pricehigh,.headhighlight').hover(function() { 
        $('.headhighlight').show(); 
    }, function() { 
        $('.headhighlight').hide(); 
    });
});</script>

php

  $name = $info['name'];
    $price = $info['price'];
    $imagefile = $info['picture'];



    echo "<ul class='featured'>";

                echo "<li class='headhighlight'>$name</li>";  
                echo  "<li class='pricehigh'>£ $price</li>";
                echo  "<li class='imagefeat'><img src='$imagefile'></li>";
                    echo "</ul>";

Answer 1

而不是绑定到列表中的每个项目，只需将处理程序绑定到列表本身。然后调整您的处理程序以显示headhighlight作为当前悬停列表的后代的项目：

$(function() {
    $('.featured').hover(function() { 
        $('.headhighlight', this).show(); 
    }, function() { 
        $('.headhighlight', this).hide(); 
    });
});

Answer 2

尝试：

$('.imagefeat,.pricehigh,.headhighlight').hover(function() { 
    $(this).find('.headhighlight').eq(0).show(); 
}, function() { 
    $(this).find('.headhighlight').eq(0).hide(); 
});