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

最新推荐文章于 2023-08-25 21:13:33 发布

qq_29069777

最新推荐文章于 2023-08-25 21:13:33 发布

阅读量561

点赞数

分类专栏：前端

原文链接：https://www.mk2048.com/blog/blog.php?id=hh2kk22bjajb&title=css%3Ahover%E7%8A%B6%E6%80%81%E6%94%B9%E5%8F%98%E5%8F%A6%E4%B8%80%E4%B8%AA%E5%85%83%E7%B4%A0%E6%A0%B7%E5%BC%8F%E7%9A%84%E4%BD%BF%E7%94%A8

版权

前端专栏收录该内容

1175 篇文章 2 订阅

订阅专栏

效果演示

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

兄弟元素

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

父元素的子元素

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

兄弟元素的子元素

附加代码:

<!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>

更多专业前端知识，请上【猿2048】www.mk2048.com