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

Question

我正在尝试添加和删除类，将链接悬停在其上方的图像上（在同一个容器内），但我遗漏了一些东西，因为它不起作用：

这是 jQuery 中的 sn-p：

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>

Answer 1

这里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');
    }
);