Jquery .hover displaying all arrow glyphicons in li tags that is inside foreach loop

3 Views

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.

Read More
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.

Post Views: 3

Related posts

1 comment

  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();

 });

});

Comments are closed.