📌  相关文章
📜  在子 jquery 上悬停添加类 - Javascript (1)

📅  最后修改于: 2023-12-03 15:37:41.648000             🧑  作者: Mango

在子 jQuery 上悬停添加类 - JavaScript

在程序开发中，我们经常需要控制 HTML 元素的样式。其中一项常见任务是在悬停或焦点状态下向元素添加或删除类。这个任务可以通过 jQuery 轻松完成。本文将向您展示如何在子元素上悬停时添加类。

HTML

首先，我们需要有HTML元素。在以下示例中，我们将创建一个具有一些子元素的 div 元素，这些子元素将在鼠标悬停时添加类。

<div class="parent">
  <div class="child">Child 1</div>
  <div class="child">Child 2</div>
  <div class="child">Child 3</div>
</div>
CSS

接下来，我们需要为这些元素定义 CSS 样式，以便在添加类时能够成功显示。以下是我们在此示例中使用的 CSS 样式：

.parent {
  display: flex;
}

.child {
  padding: 10px;
  margin: 5px;
  background-color: lightgray;
}

.child.active {
  background-color: lightblue;
}

上面 CSS 实现了以下目的：

  • 将 .parent 元素设置为 flex 布局。
  • 给 .child 元素设置默认样式，背景颜色为 lightgray。
  • 在子元素上添加 .active 类时，将背景颜色更改为 lightblue。
JavaScript

现在，我们已经准备好添加 JavaScript 代码以在子元素上悬停时添加类。将以下代码添加到您的 .js 文件中：

$(document).ready(function() {
  $('.parent').on('mouseenter', '.child', function() {
    $(this).addClass('active');
  }).on('mouseleave', '.child', function() {
    $(this).removeClass('active');
  });
});

这段代码使用 jQuery 中的 on() 方法来绑定 mouseenter 和 mouseleave 事件处理程序。当鼠标移动到子元素上时，添加类。当鼠标离开时，删除类。

完整代码

完整的 HTML、CSS、JavaScript 代码如下所示：

<!DOCTYPE html>
<html>
<head>
  <meta charset="utf-8">
  <title>Hover on Child jQuery - JavaScript</title>
  <style>
    .parent {
      display: flex;
    }

    .child {
      padding: 10px;
      margin: 5px;
      background-color: lightgray;
    }

    .child.active {
      background-color: lightblue;
    }
  </style>
</head>
<body>
  <div class="parent">
    <div class="child">Child 1</div>
    <div class="child">Child 2</div>
    <div class="child">Child 3</div>
  </div>
  
  <script src="https://code.jquery.com/jquery-3.4.1.min.js"></script>
  <script>
    $(document).ready(function() {
      $('.parent').on('mouseenter', '.child', function() {
        $(this).addClass('active');
      }).on('mouseleave', '.child', function() {
        $(this).removeClass('active');
      });
    });
  </script>
</body>
</html>

以上就是在子 jQuery 上悬停添加类的示例介绍，现在您可以使用此方法控制自己的 HTML 样式。