CODEWITHSUNDEEP
javascriptjqueryhtmlcss
James
James

Reputation: 557

changing class of li dynamically after hovering

Hi I was wondering if there was anyway to dynamically change the class of a list when you hover over it. Here is my code and fiddle. When I hover over the li I want it to change the class. and on mouseout I want it to change back to original. 

$('.navi > li').on("mouseover", function () {
    ($(this)).removeClass('.navi').addClass('.navi2');
    $('.hover-name', this).show();
}).on("mouseout", function() { 
    $('.hover-name').hide();
});

http://jsfiddle.net/Samfr/8/

Upvotes: 0

Views: 158

Answers (7)

user2628521
user2628521

Reputation:

http://jsfiddle.net/Samfr/14/

This is that what u mean...

$('.navi > li').on("mouseover", function () {
    $(this).removeClass('navi').addClass('navi2');
    $('.hover-name', this).show();
}).on("mouseout", function() { 
    $('.hover-name').hide();
    $(this).removeClass('navi2').addClass('navi');
});

When you hover a link the color will be red and when you mouseout the color will reset.
That way you can see how the script works!

Upvotes: 2

GreyRoofPigeon
GreyRoofPigeon

Reputation: 18113

Why not use a CSS solution, it's much easier:

.hover-name { display: none; }
.navi li:hover .hover-name { display: block; }

Check your updated Fiddle

Upvotes: 2

Keith
Keith

Reputation: 994

You had an extra period when adding and removing the class. Those should only be used to select the elements not change the class name.

$('.navi > li').on("mouseover", function () {
  ($(this)).removeClass('navi').addClass('navi2');
  $('.hover-name', this).show();
}).on("mouseout", function() { 
  $('.hover-name').hide();
});

Upvotes: 2

aslawin
aslawin

Reputation: 1981

there is my solution:

$('.navi > li').on("mouseover", function () {
    $(this).addClass('active').siblings().removeClass(active);
    $('.hover-name', this).show();
}).on("mouseout", function() { 
    if( $(this).hasClass('active'))
        $(this).removeClass('active');
    $('.hover-name').hide();
});

Working fiddle

Upvotes: 2

user3334690
user3334690

Reputation: 899

I think hover might be a little better for what you are doing. http://api.jquery.com/hover/

Also, I'm not too clear on what you are asking but one of the examples on the above hover documentation page seems to describe something similar.

$( "td" ).hover(
  function() {
    $( this ).addClass( "hover" );
  }, function() {
    $( this ).removeClass( "hover" );
  }
);

Upvotes: 3

PixelAcorn
PixelAcorn

Reputation: 494

Will this work?

JSFiddle

Jquery:

$('.navi > li').on("mouseover", function () {
    $('.hover-name', this).show();
    $(this).attr('class', 'red');
}).on("mouseout", function() { 
    $('.hover-name').hide();
    $(this).attr('class', '');
});

Upvotes: 2

bto.rdz
bto.rdz

Reputation: 6720

try this:

define a new class, for example dinamic-li

$('.dinamic-li').on("mouseenter", function () {
   $(this).addclass('navi');
   $(this).removeclass('navi2');
});

$('.dinamic-li').on("mouseleave", function () {
   $(this).addclass('navi2');
   $(this).removeclass('navi');
});

Upvotes: 2

Related Questions