web前端JQuery当鼠标浏览到对应的地方盒子颜色相对改变

要实现当鼠标移动到对应的盒子上时颜色发生变化，可以使用jQuery的mouseenter和mouseleave事件。以下是一个简单的示例代码：

HTML:

<div id="box1" class="box">盒子1</div>
<div id="box2" class="box">盒子2</div>
<div id="box3" class="box">盒子3</div>

CSS:

.box {
  width: 100px;
  height: 100px;
  margin: 10px;
  background-color: #f0f0f0;
  display: inline-block;
  text-align: center;
  line-height: 100px;
}
 
.hover-effect {
  background-color: #ff0000; /* 鼠标悬停时的颜色 */
}

jQuery:

$(document).ready(function() {
  $('.box').mouseenter(function() {
    $(this).addClass('hover-effect');
  }).mouseleave(function() {
    $(this).removeClass('hover-effect');
  });
});

确保在你的HTML中引入了jQuery库：

<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>

这段代码会为类名为box的每个元素添加鼠标进入和离开的事件监听。当鼠标进入盒子时，.hover-effect类将被添加到该盒子上，改变背景色；当鼠标离开盒子时，.hover-effect类将被移除，恢复原来的背景色。