jQuery possible optimize custom hover code -
i have menu , each list item gets different color border on hover. works feels clunky. how can optimize code don't repeat much. $('ul>li:first-child>a').hover(function() { $(this).css('border-bottom', '0.2em solid blue'); }, function() { $(this).css('border-bottom', '0'); }) $('ul>li:nth-child(2)>a').hover(function() { $(this).css('border-bottom', '0.2em solid green'); }, function() { $(this).css('border-bottom', '0'); }) $('ul>li:last-child>a').hover(function() { $(this).css('border-bottom', '0.2em solid yellow'); }, function() { $(this).css('border-bottom', '0'); }) ul li { display: inline-block; } <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> <ul> <li><a href="#">blue</a></li> <li...