更改悬停颜色按钮单击

Question

I want the div onhover background color to change to blue once button is clicked.

In this example, it changes the normal background color as well:

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

Try

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

make use of hover() jquery function and make use of class instead of css

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

css class

.hover_me {
  background: blue;
}

Answer 3

Your Jquery DOM was incorrect,

Here is how it does

$(document).ready(function(){

// jQuery methods go here...

});

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

In your jQuery, add an eventhandler for mouseout, to remove the background.

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