In an attempt to modify the bottom border color of my navigation bar based on the link being hovered over, I want the bottom border color to change to match that of the hovered link. When the link loses focus or hover, the navigation bottom-border should revert to its original color. Below you can find my HTML and jQuery code snippet.
<nav>
<ul class="<?php echo $ul; ?>">
<li class="home"><a class="home" href="/">Home</a></li>
<li class="letters"><a class="letters" href="/product/type/letters">Letters</a></li>
<li class="business active"><a class="active business" href="/product/type/business">Business</a></li>
<li class="cards"><a class="cards" href="/product/type/cards">Cards</a></li>
<li class="gifts"><a class="gifts" href="/product/gifts">Gifts</a></li>
</ul>
</nav>
/jQuery/
$('nav li a').hover(function(){
var orginalClass = $(this).parent().parent().attr('class');
$(this).parent().parent().attr('class', '');
var classType = $(this).attr('class');
$(this).parent().parent().addClass(classType);
},
function() {
$(this).parent().parent().attr('class', '');
$(this).addClass(orginalClass);
});