更改懸停顏色按鈕單擊

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")
    });
})