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>

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

1 个答案: