在ul的每个第一个孩子上添加类，并在每个悬停时将其删除

Question

I have a ul repeat as a different category. With the help of jquery i added the class on every first child of ul li, then i removed it whenever i hover on any li. But one of the defect is Whenever i hover on any element every category ul li first-child classes removed but I want only specefic ul li first-child class to be removed when hover at a time.

$(".product-left ul li:first-child img").addClass("first_child");

$(".product-left ul li ").mouseover(function() {
  $(".product-left ul li:first-child img" ).each.removeClass("first_child");
}).mouseout(function() { 
  $(".product-left ul li:first-child img").addClass("first_child");
});

html

<div class="product-left">



     <ul>
              <li><div class="pr_name"> <a href=" subproductpage.php?id=4"><div class="img_50_35">
        <img width="50" height="35" src="childsubcategory_image/20120925_085744_accomodation.gif"> </div>
        <span class="product_nm"> cosmo_sub_child_2 </span></a>
        </div>
  </li>
                 <li><div class="pr_name"> <a href=" subproductpage.php?id=3"><div class="img_50_35">
        <img width="50" height="35" src="childsubcategory_image/20120925_080004_search.gif"> </div>
        <span class="product_nm"> cosmo_sub_child </span></a>
        </div>
       </li>
                 </ul>




        </div>

Answer 1

Use this within the mouseover event handler to refer to the element for which the event was triggered:

$(".product-left ul li").mouseover(function() {
    $("img", this).removeClass("first_child");
}).mouseout(function() { 
    $("img", this).addClass("first_child");
});

Answer 2

try this

$(".product-left ul").find('img:eq(0)').addClass("first_child");
$(".product-left ul li").mouseover(function() {
    $(this).parent().find("img:eq(0)").removeClass("first_child");
}).mouseout(function() {
    $(this).parent().find("img:eq(0)").addClass("first_child");
});​

FIDDLE with a

tag instead if tag

UPDATED CODE

UPDATED FIDDLE