javascript - 更改悬停颜色按钮单击

Question

我希望在单击按钮后 div onhover 背景颜色变为蓝色。

在这个例子中，它也改变了正常的背景颜色:

$(document).on("click", "button", function() {
  $(".box").on("mouseover", function() {
    $(".box").css("background", "blue")
  });
})

.box:hover {
  background: red;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script>
<button>Change hover color</button>
<hr/>
<div class="box">Hello</div>

Answer 1

尝试

$(document).on("click","button",function(){

    $(".box").on("mouseover",function(){$(".box").css("background","blue")});
    $(".box").on("mouseout",function(){$(".box").css("background","")});

})

.box:hover{background:red;}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script>

<button>Change hover color</button>
<hr/>

<div class="box">Hello</div>