css:hover改变另一个元素的样式

最新推荐文章于 2021-10-14 18:05:42 发布

MisterZhang666

最新推荐文章于 2021-10-14 18:05:42 发布

阅读量1.7k

点赞数 3

文章标签： css html css3 html5

本文链接：https://blog.csdn.net/Janix520/article/details/112671296

版权

css:hover状态改变另一个元素样式的使用

效果演示

情景一：两个是兄弟元素
情景二：两个是父子元素
情景二：两个是兄弟元素,改变的是一个兄弟元素的子元素

附加代码:

<!DOCTYPE html>
<html>

<head>
  <meta charset="UTF-8">
  <meta http-equiv="X-UA-Compatible" content="ie=edge">
  <title>css:hover状态改变另一个元素样式的使用</title>
  <style>
    .box {
      width: 150px;
      height: 150px;
      background-color: #069;
      line-height: 150px;
      text-align: center;
      margin: 20px 0;
      color: #FFF;
    }

    .change {
      font-size: 20px;
      color: #0cf;
    }

    /* 情景一：两个是兄弟元素 */

    .box:hover+.change {
      color: red;
    }

    /* 情景二：两个是父子元素 */

    .box:hover .change {
      color: red;
    }

    /* 情景二：两个是兄弟元素,改变的是一个兄弟元素的子元素 */

    .box:hover+#c>.change {
      color: red;
    }
  </style>
</head>

<body>
  <!--  情景一：两个是兄弟元素  -->
  <div class="box"></div>
  <div class="change">兄弟元素</div>
  <!--  情景二：两个是父子元素  -->
  <div class="box">
    <span class="change">父元素的子元素</span>
  </div>
  <!--  情景二：两个是兄弟元素,改变的是一个兄弟元素的子元素  -->
  <div class="box"></div>
  <div id='c'>
    <div class="change">兄弟元素的子元素</div>
  </div>
</body>

</html>