Question

I am trying to show the title of a product returned from a database on hover using jquery. As it stands it works but shows the titles of all the products in the list on hover instead of the product title that is hovered over. I would like to show only the product that actvates the hover. I have tried to insert the variable but with no luck. As it stands the code below shows all the titles (headhighlight) on hover of the image(imagefeat).

Thanks for any help.

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

Instead of binding to every item within a list, simply bind the handler to the list itself. Then adjust your handler to display the headhighlight item that is a descendant of the currently hovered list:

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