Question

我有一个ul重复作为一个不同的类别。在jquery的帮助下，我在ul li的每个第一个孩子上添加了课程，然后每当我悬停在任何li上时我都会将其删除。但其中一个缺点是，每当我将每个类别悬停在任何元素上时，删除了第一个子类，但我希望在一次悬停时只删除特殊的第一个子类。

$(".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

在this事件处理程序中使用mouseover来引用触发事件的元素：

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

Answer 2

试试这个

$(".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代替标签

更新代码

UPDATED FIDDLE

在ul的每个first-child上添加class，并在每个on上悬停时删除

2 个答案: