Question

我正在尝试使用jquery显示在悬停时从数据库返回的产品的标题。它的工作原理但是在悬停时显示列表中所有产品的标题，而不是悬停在上面的产品标题。我想只显示实现悬停的产品。我试图插入变量，但没有运气。如下所示，下面的代码显示了图像悬停时的所有标题（headhighlight）。（/ p>

感谢您的帮助。

的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(); 
});

悬停功能显示产品标题

2 个答案: