CODEWITHSUNDEEP
javascriptjquerycss
alwayslearning
alwayslearning

Reputation: 411

changing li class on click

Having trouble changing the class for a li using javascript.

html

<ul id="mainmenu" style="width:130px">
<li class="mainmenudrop"><a href="" class="drop">Contact us </a>
</li></ul>

css

#mainmenu {
    list-style: none;
    margin-left: 35px;
    display: block;
}

#mainmenu li {
    float: left;
    padding: 3px 3px 3px 3px;
    position: relative;
    margin-right: 15px;
    margin-top: 1px;
    border: none;
    cursor: default;
    z-index: 999;
    display: hidden;
}

This is the class I want to change:

#mainmenu li:hover {
    border: 1px solid #aaa;
    background: #fffff;
    border-radius: 2px 2px 0px 0px; 
    padding: 2px 2px 2px 2px;
    display: hidden;
}

rest of css

#mainmenu li a {
    font-family: Verdana, Arial;
    font-size: 12px;
    color: #444444;
    text-decoration: none;
    display: block;
}

#mainmenu li:hover a {
    color: #333333;
}
#mainmenu li .drop {
    padding: 1px 20px 2px 4px;
    background: url("../images/arrow2.gif") no-repeat right 4px ;
}

#mainmenu li:hover .drop {
    background: url("../images/arrow.gif") no-repeat right 4px; 
 }

js (wanting to use)

$(#mainmenu li:hover).click(function(){
    $(this).removeClass('menuhoverswap');
    $(this).addClass('menuhoverswap');
});

id to swap

#menuhoverswap {
border: 1px solid #aaa;
}

Normally would be ok doing it but cant get my head around it as I have done the css for the menu in a different markup, referring css to mainmenu then li rather then giving the li a class of its own.

Upvotes: 0

Views: 81

Answers (2)

eg_dac
eg_dac

Reputation: 701

It's confusing what you are trying to achieve, but here is what i think you want to try.

http://jsfiddle.net/ccx9o55s/2

$(".mainmenudrop").on("mouseenter", function(e){
    $(this).addClass("menuhoverswap");
});

$(".mainmenudrop").on("mouseleave", function(e){
    $(this).removeClass("menuhoverswap");
});

Upvotes: 1

Bellu
Bellu

Reputation: 2573

UPDATED

Do you want to add the class on hover only?

$('.drop').hover(
  function() {
    $(this).addClass('selected');
  }, function() {
    $('.drop').removeClass('selected');
  });

Here the full working example with your code.

Upvotes: 0

Related Questions