help with adding Classes with jQuery

I am trying to change my navigation bottom border color based on what link is hovered over, the bottom border color should change to match that of the hovered link, when when the link loses focus or hover, then the navigation bottom-border should return to it's original color, below is my HTML and jQuery.

<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');
   开发者_JAVA百科         $(this).parent().parent().attr('class', '');
            var classType = $(this).attr('class');
            $(this).parent().parent().addClass(classType);
        }, 
        function() {
            $(this).parent().parent().attr('class', '');
            $(this).addClass(orginalClass);
        });

---

The problem is the scope of your "originalClass" variable. It is in the local scope of the first hover function, so it is inaccessible in the second.

What you should be doing is simply adding and removing a second CSS class that overwrites the settings of the first.

---

var orginalClass='';   
$('nav li a').hover(function(){
    var ul = $(this).closest('ul');
    orginalClass = ul.attr('class');
    var classType = $(this).attr('class');
    ul.removeClass().addClass(classType);
}, 
function() {
    ul.removeClass().addClass(orginalClass);
});

---

Try the following

$('nav li a').each(function() {
  var savedClass = $(this).parents('nav').first().attr('class');
  $(this).hover(function() {
    $(this).parents('nav').first().attr('class', $(this).attr('class'));
  }, function() {
    $(this).parents('nav').first().attr('class', savedClass);
  });
});

Fiddle: http://jsfiddle.net/9J7RS/

---

$('nav li a').hover(function(){
            var ul = $(this).closest('ul');                                              
            ul.data('originalClass', ul.attr('class') );             
            ul.removeClass( ul.data('originalClass') );             
            ul.addClass( $(this).attr('class') );
        }, 
        function() {
            var ul = $(this).closest('ul'); 
            ul.removeClass( $(this).attr('class') ); 
            ul.addClass( ul.data('originalClass') );
        }
);