help with adding Classes with jQuery

Question

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

Diodeus - James MacFarlane · Accepted Answer · 2011-09-20 17:32:10Z

3

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.

answered Sep 20, 2011 at 17:32

Diodeus - James MacFarlane

115k33 gold badges164 silver badges180 bronze badges

Sign up to request clarification or add additional context in comments.

Comments

Simon Arnold · Accepted Answer · 2011-09-20 17:36:48Z

0

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);
});

answered Sep 20, 2011 at 17:36

Simon Arnold

16.2k8 gold badges70 silver badges89 bronze badges

Comments

JaredPar · Accepted Answer · 2011-09-20 17:36:15Z

0

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/

answered Sep 20, 2011 at 17:36

JaredPar

759k152 gold badges1.3k silver badges1.5k bronze badges

Comments

aziz punjani · Accepted Answer · 2011-09-20 17:45:30Z

0

$('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') );
        }
);

answered Sep 20, 2011 at 17:45

aziz punjani

25.8k9 gold badges49 silver badges56 bronze badges

Collectives™ on Stack Overflow

help with adding Classes with jQuery

4 Answers 4

Comments

Comments

Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

4 Answers 4

Comments

Comments

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related