如何实现鼠标悬浮时按钮背景色切换？求jQuery与原生JS实现方案

嘿，我来帮你搞定这个按钮悬浮变色的问题！先看看你现有jQuery代码里的两个小问题：

• jQuery中没有onmouseover这个事件绑定方法，应该用mouseover()或者hover()
• jQuery对象不能直接使用原生DOM的.style属性，要改用jQuery的.css()方法来修改样式

接下来给你三种可行的实现方式：

方法一：纯CSS实现（推荐，最简洁） #

这种样式交互用CSS就能搞定，不需要任何JS，性能也更好：

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

/* 鼠标悬浮时触发的样式 */
.J:hover {
  background-color: blue;
}

方法二：正确的jQuery实现 #

修复你代码里的问题，这里有两种简洁的写法：

写法1：分开绑定mouseover和mouseout事件 #

// 鼠标悬浮进入按钮时，把背景改成蓝色
$(".J").mouseover(function() {
  $(this).css("background-color", "blue");
});

// 鼠标离开按钮时，恢复原来的红色
$(".J").mouseout(function() {
  $(this).css("background-color", "red");
});

写法2：用hover方法同时处理进入和离开 #

$(".J").hover(
  // 悬浮进入的回调函数
  function() {
    $(this).css("background-color", "blue");
  },
  // 悬浮离开的回调函数
  function() {
    $(this).css("background-color", "red");
  }
);

方法三：原生JavaScript实现 #

这里也有两种常见写法，推荐用事件监听器的方式，代码耦合性更低：

写法1：添加事件监听器（推荐） #

// 获取目标按钮元素
const tacoButton = document.querySelector(".J");

// 绑定鼠标进入事件
tacoButton.addEventListener("mouseover", function() {
  this.style.backgroundColor = "blue";
});

// 绑定鼠标离开事件
tacoButton.addEventListener("mouseout", function() {
  this.style.backgroundColor = "red";
});

写法2：直接在元素上绑定事件（不推荐，耦合性高） #

先修改你的HTML：

<button class="J" onmouseover="turnBlue()" onmouseout="turnRed()">taco truck</button>

然后添加对应的JS函数：

function turnBlue() {
  document.querySelector(".J").style.backgroundColor = "blue";
}

function turnRed() {
  document.querySelector(".J").style.backgroundColor = "red";
}

内容的提问来源于stack exchange，提问作者Rahul Menon