Jquery 在链接上悬停将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>

---

此处

img

不是

a

元素的父元素，它是同级元素，因此请使用

但是因为有两个

a

元素（一个在

h2

中）

---

这些图像不是主播的父母，他们是兄弟姐妹。请创建一个提琴，以便通过可视化更好地理解。我已经检查了代码，您有两个锚链接一个是子链接，另一个是图像的兄弟链接，所以让我们知道您要在哪个锚链接上运行函数您还没有看到它有两个锚标记一个是子标记，另一个是兄弟标记。@TheMechanical post，我编辑了回答。。。如果downvoter可以留下一条评论，说明遗漏了什么，以便能够纠正，这将对用户有帮助

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

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