hover元素A改变多种元素B的样式

最新推荐文章于 2024-08-15 18:19:19 发布

小御姐@stella

最新推荐文章于 2024-08-15 18:19:19 发布

阅读量551

点赞数 16

文章标签：前端 html javascript

本文链接：https://blog.csdn.net/qq_54548545/article/details/140467403

版权

1）hover元素A 改变元素A的子元素B0

( .elA:hover .elB0 { })

<!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>
    .elA {
      width: 550px;
      height: 100px;
      background-color: #eee;
    }
    .elB0 {
      width: 300px;
      height: 20px;
      color: #ddd;
    }
    .elA:hover .elB0 {
      background-color: #5b734a;
    } 
  </style>
</head>

<body>
  <div class="elA">元素A
    <div class="elB0">元素B0:我是元素A的子元素</div>
  </div>
</body>

</html>

2）hover元素A 改变元素A的相邻兄弟元素B1

( .elA:hover+.elB1 { })

<!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>
    .elA {
      width: 550px;
      height: 100px;
      background-color: #eee;
    }

    .elB0 {
      width: 300px;
      height: 20px;
      color: #ddd;
    }

    .elB1 {
      width: 300px;
      background-color: #5b734a;
      color: #ddd;
      height: 0;
      overflow: hidden;
      transition: 1s;
      position: absolute;
    }
    .elA:hover+.elB1 {
      height: 200px;
    }
  </style>
</head>

<body>
  <div class="elA">元素A
    <div class="elB0">元素B0:我是元素A的子元素</div>
  </div>
  <div class="elB1">
    元素B1:我挨着元素A
    <div class="inner">
      Lorem ipsum dolor sit amet consectetur adipisicing elit.<br>
      Architecto officiis repudiandae natus dolores quos porro
      eveniet eum temporibus aspernatur <br>commodi sapiente ab accusantium
      dolorem nisi id nemo, obcaecati velit non.
    </div>
  </div>
</body>

</html>

3）hover元素A 改变元素A的非相邻兄弟元素B2

2种方法均可。

( .elA:hover~.elB2 { })
( .elA:hover+.elB1+.elB2 { })

<!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>
    .elA {
      width: 550px;
      height: 100px;
      background-color: #eee;
    }

    .elB0 {
      width: 300px;
      height: 20px;
      color: #ddd;
    }

    .elB1 {
      width: 300px;
      background-color: #5b734a;
      color: #ddd;
      height: 0;
      overflow: hidden;
      transition: 1s;
      position: absolute;
    }

    .elB2 {
      width: 300px;
      height: 100px;
      margin: 180px;
      line-height: 100px;
      color: #ddd;
    }
    /* 以下2种方法可以选中元素elB2 */
    .elA:hover~.elB2 {
    /* .elA:hover+.elB1+.elB2 { */
      background-color: #5b734a;
    }
  </style>
</head>

<body>
  <div class="elA">元素A
    <div class="elB0">元素B0:我是元素A的子元素</div>
  </div>
  <div class="elB1">
    元素B1:我挨着元素A
    <div class="inner">
      Lorem ipsum dolor sit amet consectetur adipisicing elit.<br>
      Architecto officiis repudiandae natus dolores quos porro
      eveniet eum temporibus aspernatur <br>commodi sapiente ab accusantium
      dolorem nisi id nemo, obcaecati velit non.
    </div>
  </div>
  <div class="elB2">
    元素B2:我和元素A中间隔着元素B1
  </div>
</body>

</html>

做个记录，如有不足，欢迎补充。

不要忽视你达成的每个小目标，它是你前进路上的垫脚石。冲！