zoukankan      html  css  js  c++  java
  • css:hover状态改变另一个元素样式的使用

    效果演示

    <head> <meta charset="UTF-8"> <meta http-equiv="X-UA-Compatible" content="ie=edge"> <title>css:hover状态改变另一个元素样式的使用</title> <style> .box { 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>

    附加代码:

    <!DOCTYPE html>
    <html>
    
    <head>
      <meta charset="UTF-8">
      <meta http-equiv="X-UA-Compatible" content="ie=edge">
      <title>css:hover状态改变另一个元素样式的使用</title>
      <style>
        .box {
           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>
    
  • 相关阅读:
    android中接口和抽象类的区别
    最靠谱的禁止ViewPager滑动方法
    Android Studio 自定义属性,命名空间
    代码设置Android EditText的相关问题。输入长度maxLength
    关于Android中,保留小数点后两位的方式
    Android的线程使用来更新UI----Thread、Handler、Looper、TimerTask等
    既然安卓免费,那 Google 是靠什么赚钱的?
    android viewconfiguration
    Android中实现为TextView添加多个可点击的文本
    Textview解析带图片的html示例
  • 原文地址:https://www.cnblogs.com/don-yang/p/9468958.html
Copyright © 2011-2022 走看看