更改悬停颜色按钮单击

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> 

Answer 2

利用hover（） jQuery函数并利用类而不是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")
    });
})