js怎么实现经过子类父类变高

JS如何实现经过子类父类变高

在JavaScript中实现鼠标经过子类时父类变高，可以通过事件监听、DOM操作、CSS样式三种方法来实现。下面将详细描述通过事件监听和CSS样式两个方面来实现这个功能。

一、事件监听

1、添加事件监听

首先，我们可以通过JavaScript为子类添加mouseover和mouseout事件监听。当鼠标移动到子类上时，触发mouseover事件，父类的高度增加；当鼠标移出子类时，触发mouseout事件，父类的高度恢复原状。

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Document</title>
  <style>
    .parent {
      width: 200px;
      height: 100px;
      background-color: lightblue;
      transition: height 0.3s;
    }
    .child {
      width: 100px;
      height: 50px;
      background-color: lightcoral;
      margin: 25px;
    }
  </style>
</head>
<body>
  <div class="parent" id="parent">
    <div class="child" id="child"></div>
  </div>
  <script>
    const child = document.getElementById('child');
    const parent = document.getElementById('parent');
    child.addEventListener('mouseover', function() {
      parent.style.height = '200px';
    });
    child.addEventListener('mouseout', function() {
      parent.style.height = '100px';
    });
  </script>
</body>
</html>

2、使用transition效果

在上述代码中，通过CSS的transition属性，可以使父类的高度变化具有平滑的过渡效果。这样用户体验会更好。

二、CSS样式

1、通过CSS伪类实现

我们也可以通过纯CSS实现这个功能。利用CSS的伪类选择器来实现鼠标经过子类时父类变高的效果。

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Document</title>
  <style>
    .parent {
      width: 200px;
      height: 100px;
      background-color: lightblue;
      transition: height 0.3s;
    }
    .child {
      width: 100px;
      height: 50px;
      background-color: lightcoral;
      margin: 25px;
    }
    .parent:hover {
      height: 200px;
    }
  </style>
</head>
<body>
  <div class="parent">
    <div class="child"></div>
  </div>
</body>
</html>

2、通过组合选择器实现

通过组合选择器，我们可以实现更加复杂的效果。例如，当鼠标经过任意子类时，使父类变高。

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Document</title>
  <style>
    .parent {
      width: 200px;
      height: 100px;
      background-color: lightblue;
      transition: height 0.3s;
    }
    .child {
      width: 100px;
      height: 50px;
      background-color: lightcoral;
      margin: 25px;
    }
    .child:hover ~ .parent {
      height: 200px;
    }
  </style>
</head>
<body>
  <div class="parent">
    <div class="child"></div>
  </div>
</body>
</html>

三、JavaScript与CSS结合

有时我们可能需要更复杂的逻辑和效果，这时可以结合JavaScript和CSS来实现。例如，我们希望鼠标经过子类时父类不仅变高，还要改变背景颜色。

1、添加CSS类

首先定义CSS类，用于改变父类的样式。

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Document</title>
  <style>
    .parent {
      width: 200px;
      height: 100px;
      background-color: lightblue;
      transition: height 0.3s, background-color 0.3s;
    }
    .child {
      width: 100px;
      height: 50px;
      background-color: lightcoral;
      margin: 25px;
    }
    .parent.hovered {
      height: 200px;
      background-color: lightgreen;
    }
  </style>
</head>
<body>
  <div class="parent" id="parent">
    <div class="child" id="child"></div>
  </div>
  <script>
    const child = document.getElementById('child');
    const parent = document.getElementById('parent');
    child.addEventListener('mouseover', function() {
      parent.classList.add('hovered');
    });
    child.addEventListener('mouseout', function() {
      parent.classList.remove('hovered');
    });
  </script>
</body>
</html>

2、使用JavaScript切换类

在上述代码中，通过JavaScript的classList方法，我们可以轻松地在父类上添加或移除CSS类，从而实现更复杂的效果。

四、更多高级效果

1、动态调整高度

我们可以通过JavaScript动态计算父类应变高的高度。例如，当子类的内容变化时，父类自动调整高度以适应新的内容。

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Document</title>
  <style>
    .parent {
      width: 200px;
      background-color: lightblue;
      transition: height 0.3s;
    }
    .child {
      width: 100px;
      height: 50px;
      background-color: lightcoral;
      margin: 25px;
    }
  </style>
</head>
<body>
  <div class="parent" id="parent">
    <div class="child" id="child"></div>
  </div>
  <script>
    const child = document.getElementById('child');
    const parent = document.getElementById('parent');
    child.addEventListener('mouseover', function() {
      const newHeight = child.offsetHeight + 100; // 计算新的高度
      parent.style.height = newHeight + 'px';
    });
    child.addEventListener('mouseout', function() {
      parent.style.height = '100px';
    });
  </script>
</body>
</html>

2、结合动画库

为了实现更加复杂和炫酷的效果，我们可以结合动画库，如Animate.css或GSAP来实现。例如，使用GSAP可以实现复杂的动画效果。

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Document</title>
  <style>
    .parent {
      width: 200px;
      height: 100px;
      background-color: lightblue;
    }
    .child {
      width: 100px;
      height: 50px;
      background-color: lightcoral;
      margin: 25px;
    }
  </style>
</head>
<body>
  <div class="parent" id="parent">
    <div class="child" id="child"></div>
  </div>
  <script src="https://cdnjs.cloudflare.com/ajax/libs/gsap/3.7.1/gsap.min.js"></script>
  <script>
    const child = document.getElementById('child');
    const parent = document.getElementById('parent');
    child.addEventListener('mouseover', function() {
      gsap.to(parent, {height: '200px', duration: 0.3});
    });
    child.addEventListener('mouseout', function() {
      gsap.to(parent, {height: '100px', duration: 0.3});
    });
  </script>
</body>
</html>

五、总结

通过上述方法，我们可以灵活地使用JavaScript和CSS实现鼠标经过子类时父类变高的效果。事件监听、CSS伪类、组合选择器、JavaScript与CSS结合、动态调整高度、结合动画库等方法各有优缺点，可以根据具体需求选择合适的方法。

另外，在项目管理和团队协作中，推荐使用研发项目管理系统PingCode和通用项目协作软件Worktile，它们可以帮助团队更好地管理项目和任务，提高工作效率。