更改悬停颜色按钮单击

Question

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

在此示例中，它还更改了正常的背景颜色：

$(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>

Answer 2

使用 hover(( jquery 函数并使用 class 而不是 css

$(".box").hover(function(){
$(this).addClass("hover_me");
}, function(){
$(this).removeClass("hover_me");
});

CSS 类

.hover_me {
background: blue;
}

Answer 3

你的 Jquery DOM 不正确，

这是它是如何做的

$(document(.ready(function(({

jQuery方法转到此处...

}(;

$(function(){
$('button').click(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/2.1.1/jquery.min.js"></script>
<button>Change hover color</button>
<hr/>
<div class="box">Hello</div>

Answer 4

在 jQuery 中，添加一个用于 mouseout 的事件处理程序，以删除背景。

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