onemouseover如何添加backgroundcolor更改？

Question

您好想知道如何更改onhover按钮的颜色？请看看我的jquery-如果你能在原版JS中填写如何做到这一点的话？

HTML

<button class=J>taco truck</button>

CS

.J{
  background-color: red;
  width: 1000px;
  height: 200px;
}

JS

$(".J").onmouseover(function taco(){
$(".J").style.backgroundColor = "blue";
})

Answer 1

试试这个：

$('.J').mouseenter(function() {
    $(this).css('background-color', 'red');
});

或者使用jQuery hover函数，这样你就可以同时添加鼠标和鼠标移出事件：

$('.J').hover(function() {
    $(this).css('background-color', 'red');
}, function() {
    $(this).css('background-color', 'blue');
});

因此，您可以同时添加mouseenter和mouseleave个事件。

详细了解.hover() here。

或者你可以使用css：

来完成

.J {
    background-color: blue;
}
.J:hover {
    background-color: red;
}

Answer 2

当鼠标仅使用JS / jQuery进入区域时，有多种方法可以更改背景颜色：

$(".J").on("mouseover", function(e){
   e.target.style.backgroundColor = "blue";
})

.J{
  background-color: red;
  width: 1000px;
  height: 200px;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<button class=J>taco truck</button>

或

document.querySelector(".J").onmouseover = function(e){
   $(e.target).css("backgroundColor", "blue");
}

.J{
  background-color: red;
  width: 1000px;
  height: 200px;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<button class=J>taco truck</button>

或

$(".J").hover(function(e){
   e.target.classList.add("blue");
})

.J{
  background-color: red;
  width: 1000px;
  height: 200px;
}

.blue {
  background-color: blue;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<button class=J>taco truck</button>

...列举一些。

但我认为你想要的是：

$(".J").hover(function(e) {
  $(e.target).toggleClass("blue");
})

.J{
  background-color: red;
  width: 1000px;
  height: 200px;
}

.blue {
  background-color: blue;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
  <button class=J>taco truck</button>