Question

I’m using this jQuery to add a class to a span when the mouse is over the li tag. It’s for a navigation menu, this code is adding the blackfont class to all menu spans. How can I use this() to to have the blackfont class applied only to the li which the mouse is over?

<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(this).find('span.sub').addClass("blackfont");
          },
          function () {
            jQuery(this).find('span.sub').removeClass("blackfont");
          }
        );
    });
</script>