jquery - jQuery 仅在悬停时向此嵌套元素添加类

Question

当鼠标悬停在 li 标签上时，我正在使用这个 jQuery 将一个类添加到跨度中。它用于导航菜单，此代码将 blackfont 类添加到所有菜单跨度。如何使用this()to 将 blackfont 类仅应用于鼠标所在的 li ？

<script type="text/javascript">
 jQuery(document).ready(function() {
        jQuery("#second-menu ul li").hover(
          function () {
            jQuery("ul#secondary-menu li a span.sub").addClass("blackfont");
          },
          function () {
            jQuery("ul#secondary-menu li a span.sub").removeClass("blackfont");
          }
        );
    });
</script>

Answer 1

<script type="text/javascript">
 jQuery(document).ready(function() {
        jQuery("#second-menu ul li").hover(
          function () {
            jQuery("span.sub", this).addClass("blackfont");
          },
          function () {
            jQuery("span.sub", this).removeClass("blackfont");
          }
    });
</script>

只需选择跨度内部this元素，这是您悬停的元素。

Answer 2

<script type="text/javascript">
 jQuery(document).ready(function() {
        jQuery("#second-menu ul li").hover(function () {
            jQuery(this).find('span.sub').addClass("blackfont");
          },
          function () {
            jQuery(this).find('span.sub').removeClass("blackfont");
          }
        );
    });
</script>