首页
学习
活动
专区
工具
TVP
发布
精选内容/技术社群/优惠产品,尽在小程序
立即前往

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

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

代码语言:txt
复制
<!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文件中,并在浏览器中打开该文件,即可看到效果。当鼠标悬停在一个盒子上时,该盒子会变成黄色背景,其他盒子则恢复为默认样式。

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

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

页面内容是否对你有帮助?
有帮助
没帮助

相关·内容

没有搜到相关的沙龙

领券