0

I am trying to add and remove class on hover the link to the image above it (inside the same container) but I am missing something because it doesn't work:

This is the snippet in jQuery:

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

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

This is the 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>
4

1 回答 1

0

Here img is not a parent of the a element, it is a sibling element, so use .siblings()

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

But since there are two a elements (one inside 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-20T11:37:28.680 回答