wie UI-State-Hover zu entfernen, indem Sie jQuery

Question

Ich habe UI-State-Hover-Klasse für mouseover entfernen und klicken Sie auf die Schaltfläche.Ich verwende p: commandButton von jsf.

Dafür ich jquery Beispielcode verwenden:

$("#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"); 
    }); 

Mit über jQuery, Maus schweben auf die Schaltfläche ordnungsgemäß funktioniert. Aber Mausklick auf die Schaltfläche, Stil-Schaltfläche in UI-State-Hover geändert. Wie kann man den ui-state-hover entfernen?

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>