Question

无法使用javascript更改li的类。

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

这是我要更改的课程：

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

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（想要使用）

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

要交换的ID

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

通常情况下可以这样做，但是我无法理解它，因为我已经在不同的标记中对菜单执行css，将css引用到mainmenu然后li而不是给li一个自己的类。

Answer 1

令人困惑的是你想要实现的目标，但这就是我认为你想要尝试的东西。

http://jsfiddle.net/ccx9o55s/2

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

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

Answer 2

已更新

您是否只想在悬停时添加课程？

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

这里包含您的代码的全部工作example。

单击更改li类

2 个答案: