如何使用 jQuery 删除 ui-state-hover答案

【问题标题】：how to remove ui-state-hover by using jQuery如何使用 jQuery 删除 ui-state-hover
【发布时间】：2017-02-12 07:19:00
【问题描述】：

我必须删除用于鼠标悬停的 ui-state-hover 类并单击按钮。我正在使用 jsf 的 p:commandButton。

为此，我使用jquery示例代码：

   $("#button").mouseover(function(){
        $(this).addClass("btn01");
    }, function() {
        alert("mouseover working");
    $(this).removeClass("ui-state-hover");
    });

    $("#button").click(function(){
        $(this).addClass("btn01");
    }, function() {
        alert("click not working");
    $(this).removeClass("ui-state-hover");
    });

使用上面的 jQuery，鼠标悬停在按钮上可以正常工作。但是鼠标单击按钮，样式按钮更改为 ui-state-hover。如何移除 ui-state-hover？

【问题讨论】：

你到底想要什么？当您在mouseover 上删除ui-state-hover 时，单击时没有任何类ui-state-hover？？因为它已经被删除了。

标签： javascript jquery css hover

【解决方案1】：

console.log($('#button-hover').attr('class'), '<<--- button-hover say current class.'); //onload
console.log($('#button-click').attr('class'), '<<---- button-click say current class.');

$("#button-hover").mouseover(function(){
   $(this).addClass("btn01");
   $(this).removeClass("ui-state-hover");
  console.log($(this).attr('class'), '<<--- button-hover say current class.');
})

$("#button-click").click(function(){
  $(this).addClass("btn01");
  $(this).removeClass("ui-state-hover");
  console.log($(this).attr('class'), '<<---- button-click say current class.');
});

.btn01 {
  background: #000;
  color:#fff;
}

.ui-state-hover {
   background: #ff0000;
   color:#000;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<button id="button-hover" style="width:100px;height:100px;" class="ui-state-hover"> button hover </button>

<button id="button-click" style="width:100px;height:100px;" class="ui-state-hover"> button click </button>

【讨论】：