The task is to create such an underscore when hovering over a navigation item:

enter image description here

I decided to create the following element for this:

.underline { position: absolute; margin-top: 4px; height: 1px; width: 20px; background-color: red;/*color for test z-index: 1000; } 
 <div class='underline'> </div>

and used the following jQuery code:

 $(document).ready(function(){ $(".main-nav_item").hover(function() { $(this).append($('.underline')); }); // или же $(".main-nav_item").mouseenter(function() { $(this).append($('.underline')); }); $(".main-nav_item").mouseleave(function() { $(this).siblings('.underline').removeClass(); }); });

Considering that the elements in the picture above have the class .main-nav_item everything should have worked correctly, but I ran into the following problem: when you move the cursor from a link not to another link, but to some other element, the underscore effect is still remains. If you lead to another link - everything works correctly.

As you can see, applied 2 options jQuery, but not one did not fit. Please tell me what could be the problem. Thank you.

  • one
    one could do all this with pseudo selectors: before &&: after and without using jquery - Lieutenant Jim Dangle

3 answers 3

Here is the CSS:

  li p { position: relative; display: table; padding: 0 4px; } li p:before { display: block; content: ''; height: 2px; width: 0px; position: absolute; top: 15px; left: 0; background: #000; -webkit-transition: all 0.5s ease-in-out; transition: all 0.5s ease-in-out; } li p:hover:before { display: block; content: ''; height: 2px; width: 100%; position: absolute; top: 15px; background: #000; }

Here is the HTML:

 <ul> <li> <p>Pizza</p> </li> </ul>

I think in general it will not be difficult to understand and jquery should not be used: http://codepen.io/geek_of_cola/pen/KgQjQN should be visible

  • Thank you, I will understand) - Alexander Sigida
  • You're welcome) Read the pseudo-selectors without them very bad) - Lieutenant Jim Dangle

You can do with selectors : hover , and :: after / :: before

 .main-nav_item:hover::after { content: ''; position: absolute; margin-top: 4px; height: 1px; width: 20px; background-color: red; } .main-nav_item { position: relative; display: inline-block; } 
 <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> <div class='main-nav_item'> item1 </div> <div class='main-nav_item'> item2 </div> <div class='main-nav_item'> item3 </div> <div class='main-nav_item'> item4 </div>

The problem with the code in question is that the hover method in this form is called twice: once when hovering, once when removing, with the underline element added each time

 $(".main-nav_item").hover(function() { $(this).append($('.underline')); });

Instead, you can use the fact that this function can take individual handlers for pointing and removal and specify in one addition, in the other removal:

 $(".main-nav_item").hover(function() { $(this).append($('<div>').addClass('underline')); }, function() { $('.underline', this).remove(); }); 
 .underline { position: absolute; margin-top: 4px; height: 1px; width: 20px; background-color: red; } .main-nav_item { position: relative; display: inline-block; } 
 <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> <div class='main-nav_item'> item1 </div> <div class='main-nav_item'> item2 </div> <div class='main-nav_item'> item3 </div> <div class='main-nav_item'> item4 </div>

In the case of mouseenter / mouseleave, similarly, since .hover is a brief entry for these methods

  • Thank you, everything works, understand the error. - Alexander Sigida

If you really want to do it in this form, you can somehow like this:

 $(".main-nav_item").hover(function() { $(this).append($('.underline')); }, function(){ $('.underline').appendTo('body'); }); 
 .underline { position: absolute; margin-top: 4px; height: 1px; width: 20px; background-color: #fff; z-index: 1000; } /* Стили для наглядности */ ul { padding: 0; margin: 0; list-style-type: none; background: #000; } ul li { display: inline-block; vertical-align: middle; padding: .5rem 1rem; } ul li a { text-decoration: none; color: #fff; display: block; } 
 <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script> <ul> <li class="main-nav_item"><a href="#">item-1</a></li> <li class="main-nav_item"><a href="#">item-2</a></li> </ul> <div class="underline"></div>

PS :

 .hover( handlerIn, handlerOut )

It would be more correct to add / remove a class :

 $(".main-nav_item").hover(function() { $(this).addClass('underline'); }, function(){ $(this).removeClass('underline'); }); 
 .underline { position: relative; } .underline:after { content: ''; position: absolute; margin-top: 4px; height: 1px; width: 20px; background-color: #fff; z-index: 1000; } /* Стили для наглядности */ ul { padding: 0; margin: 0; list-style-type: none; background: #000; } ul li { display: inline-block; vertical-align: middle; padding: .5rem 1rem; } ul li a { text-decoration: none; color: #fff; display: block; } 
 <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script> <ul> <li class="main-nav_item"><a href="#">item-1</a></li> <li class="main-nav_item"><a href="#">item-2</a></li> </ul>

Better yet , use CSS for this purpose !!! :

 .main-nav_item { position: relative; } .main-nav_item:hover:after { content: ''; position: absolute; margin-top: 4px; height: 1px; width: 20px; background-color: #fff; z-index: 1000; } /* Стили для наглядности */ ul { padding: 0; margin: 0; list-style-type: none; background: #000; } ul li { display: inline-block; vertical-align: middle; padding: .5rem 1rem; } ul li a { text-decoration: none; color: #fff; display: block; } 
 <ul> <li class="main-nav_item"><a href="#">item-1</a></li> <li class="main-nav_item"><a href="#">item-2</a></li> </ul>

  • Thank you for such a detailed response! - Alexander Sigida