如何使用jQuery刪除ui-state-hover

Question

我必須刪除用於鼠標懸停的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？

Answer 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>