There is a list, I need to, when hovering the mouse over the first item in the list, all the others are underlined, I try to do this:

$('.title_content').hover(function() { $(this).nextAll('a').css({ 'text-decoration': 'underline' }); }) 
 ul { list-style: none; } a { text-decoration: none; color: black; } 
 <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> <ul class="description"> <li><a href="#" class="title_content">USER INTERFACE DESIGN</a></li> <li><a href="#" class="remove">Wirefarming</a></li> <li><a href="#" class="remove">Prototyping</a></li> <li><a href="#" class="remove">Usability testing</a></li> </ul>

But nothing works, tell me what the problem is?

Here's how it should be:

enter image description here

    1 answer 1

    $().nextAll - selects items in the same parent.

     $('.title_content').hover(function() { $(this).closest('li').nextAll('li').find('a').css({ 'text-decoration': 'underline' }); }) 
     ul { list-style: none; } a { text-decoration: none; color: black; } 
     <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> <ul class="description"> <li><a href="#" class="title_content">USER INTERFACE DESIGN</a></li> <li><a href="#" class="remove">Wirefarming</a></li> <li><a href="#" class="title_content">Prototyping</a></li> <li><a href="#" class="remove">Usability testing</a></li> </ul>