在鏈接懸停添加/刪除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類到圖像

回答

相關問題