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

Question

我必須刪除ui-state-hover類的mouseover並單擊button.I使用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>