JQuery:如何在鼠标悬停时设置样式并删除其他样式？[JSFiddle inside]

在鼠标悬停时设置样式并删除其他样式，可以使用jQuery来实现。下面是一个示例代码，演示了如何在鼠标悬停时设置样式并删除其他样式：

<!DOCTYPE html>
<html>
<head>
  <title>Hover Style Example</title>
  <style>
    .hovered {
      background-color: yellow;
    }
  </style>
  <script src="https://code.jquery.com/jquery-3.6.0.min.js"></script>
</head>
<body>
  <div class="box">Box 1</div>
  <div class="box">Box 2</div>
  <div class="box">Box 3</div>

  <script>
    $(document).ready(function() {
      $('.box').hover(function() {
        $(this).addClass('hovered'); // 添加悬停样式
        $('.box').not(this).removeClass('hovered'); // 删除其他样式
      });
    });
  </script>
</body>
</html>

在上面的代码中，我们使用了jQuery的hover方法来监听鼠标悬停事件。当鼠标悬停在.box元素上时，会触发回调函数。在回调函数中，我们使用addClass方法为当前元素添加名为hovered的样式类，实现设置样式的效果。同时，使用not方法和removeClass方法来删除其他.box元素的样式，以确保只有当前元素具有悬停样式。

你可以将上述代码复制到一个HTML文件中，并在浏览器中打开该文件，即可看到效果。当鼠标悬停在一个盒子上时，该盒子会变成黄色背景，其他盒子则恢复为默认样式。

推荐的腾讯云相关产品：无

希望这个答案能够满足你的需求。如果有任何疑问，请随时提问。