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函数并使用class而不是css

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

css class

.hover_me {
  background: blue;
}

Answer 3

您的Jquery DOM不正确，

这是怎么做的

（文档）$。就绪（函数（）{

// 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添加一个eventhandler，以删除背景。

{{1}}

更改悬停颜色按钮单击

4 个答案: