在链接悬停添加/删除css类到图像

我想添加和删除类上的图像链接（在同一容器内），但我缺少的东西，因为它不起作用：在链接悬停添加/删除css类到图像

这是jQuery中的片段：

jQuery('.category-view a').hover(
    function() { 
    jQuery(this).parent('img').removeClass('nzi'); 
    }, 
    function() { 

    jQuery(this).parent('img').addClass('nzi'); 
    }

这是HTML：

<div class="category-view"> 
    <div class="row"> 
     <div class="category floatleft width33 vertical-separator " style="margin:50px;"> 
      <div class="spacer"> 
       <img src="/harbini/images/stories/virtuemart/category/resized/lips_202x296.png" alt="lips">      
       <h2 class="catSub"> <a href="/harbini/index.php/al/produktet/grim/buzet" title="Buzët"> Buzët </a> </h2> 

       <a href="/harbini/index.php/al/produktet/grim/buzet" class="category-overlay"><span></span></a> 
      </div> 
     </div> 

     <div class="category floatleft width33 " style="margin:50px;"> 
      <div class="spacer"> 
       <img src="/harbini/images/stories/virtuemart/category/resized/face_202x296.png" alt="face.png">      
       <h2 class="catSub"> <a href="/harbini/index.php/al/produktet/grim/fytyra" title="Fytyra"> Fytyra </a> </h2> 

       <a href="/harbini/index.php/al/produktet/grim/fytyra" class="category-overlay"><span></span></a> 
      </div> 
     </div> 
     <div class="clear"></div> 
    </div> 

    <div class="horizontal-separator"></div> 

    <div class="row"> 
     <div class="category floatleft width33 vertical-separator " style="margin:50px;"> 
      <div class="spacer"> 
       <img src="/harbini/images/stories/virtuemart/category/resized/eyes_202x296.png" alt="eyes">      
       <h2 class="catSub"> <a href="/harbini/index.php/al/produktet/grim/syte" title="Sytë"> Sytë </a> </h2> 

       <a href="/harbini/index.php/al/produktet/grim/syte" class="category-overlay"><span></span></a> 
      </div> 
     </div> 

     <div class="category floatleft width33 " style="margin:50px;"> 
      <div class="spacer"> 
       <img src="/harbini/images/stories/virtuemart/category/resized/nails_202x296.png" alt="nails.png">      
       <h2 class="catSub"> <a href="/harbini/index.php/al/produktet/grim/thonjte" title="Thonjtë"> Thonjtë </a> </h2> 

       <a href="/harbini/index.php/al/produktet/grim/thonjte" class="category-overlay"><span></span></a> 
      </div> 
     </div> 
     <div class="clear"></div> 
    </div> 
</div>

来源

2013-08-20 Xhevat Ziberi

图像不锚的父母，他们是兄弟姐妹。 –

请创建一个提琴，以便更好地了解通过视觉 –

我检查了代码，你有两个锚链接一个是孩子，另一个是兄弟图像，让我们知道你想运行哪个锚链接功能 –

这里img不在a元素的父，它是一个兄弟元素，所以使用.siblings()

jQuery('.category-view a').hover(
    function() { 
    jQuery(this).siblings('img').removeClass('nzi'); 
    }, 
    function() { 
    jQuery(this).siblings('img').addClass('nzi'); 
    }

但由于有两个a元素（一个内部h2）

jQuery('.category-view a').hover(
    function() { 
     jQuery(this).closest('.category').find('img').removeClass('nzi'); 
    }, 
    function() { 
     jQuery(this).closest('.category').find('img').addClass('nzi'); 
    } 
);

来源

2013-08-20 11:37:28

谢谢你，这是回答;） –

@downvoter我没有错过任何东西 –

你还没有看到它有两个锚标签一个是孩子，另一个是兄弟姐妹。 –

在链接悬停添加/删除css类到图像

回答

相关问题