Jquery .hover显示位于foreach循环内的li标签中的所有箭头glyphicons

Question

I'm a bit confused on how to properly insert my .hover() function inside my foreach li tags. cause when ever I hover my cursor on the assigned class all of the tags displays the glyphicon content.

here is my code.

jQuery(function() {

  jQuery(".side-nav").hover(function() {

    jQuery('.hover-arrow-right').show();

  });

});

<nav class="side-nav">
  <ul>
    <?php foreach($posts as $p): ?>
    <a href="<?php echo get_permalink($p->ID);?>">
      <li>
        <?php echo $p->post_title; ?><span class="hover-arrow-right"><i class="fa fa-chevron-right"></i></span>
      </li>
    </a>
    <?php endforeach; ?>
  </ul>
</nav>

the proper output is the glyphicon must only show when the cursor is placed on a li respectively.

sorry for my bad english.

thank you. hope anyone can help me in my problem.

</div>

Answer 1

you should do hover on the li

jQuery(function() {

  jQuery(".side-nav ul a > li").hover(function() {

    jQuery(this).find('.hover-arrow-right').show();

 });

});