CSS hover 改變另外一個元素狀態

Part.1 問題

我們寫頁面時也不少遇到這個問題，在沒有使用任何預處理語言前提下，當 hover 一個元素的時候怎么改變其它的元素？

這里我把它分為兩種情況(除自身以外)  

hover 時

1： 改變本身的子元素

2： 改變本身元素的兄弟元素

Part.2 解決

第一種情況最常見也相對好解決：

現在我們假設  class1 為父級元素， class2 為它的子級元素

HTML

 <div class="class1">
      <div class="class2"></div>
 </div>

CSS

    .class1 {
        width: 300px;
        height: 300px;
        margin: 200px auto;
        border: 1px solid red
    }
    .class2 {
        width: 150px;
        height: 150px;
        float: right;
        border: 1px solid black
    }
    .class1:hover .class2{
        background: yellow
    }

效果：

 

第二種情況不是很常見：

現在我們假設  class1丶class2 為兄弟元素，這里會用到 CSS3 的兄弟選擇器

HTML

 <div class="class1"></div>
 <div class="class2"></div>

CSS

   .class1 {
        width: 300px;
        height: 300px;
        margin: 200px auto 0;
        border: 1px solid red
    }
    .class2 {
        width: 150px;
        height: 150px;
        margin: auto;
        border: 1px solid black
    }
    .class1:hover + .class2{
        background: yellow
    }

 

效果：