CSS hover偽類改變其他元素的樣式

:hover 偽類經常用於頁面的一些鼠標交互、鏈接點擊變化，增強頁面的用戶體驗，但是可以用來改變其他元素樣式，可以在不使用JS 的情況下，達到想要的頁面效果。

1、hover改變自身的效果：

鼠標懸浮改變樣式：

 

HTML

<div id="yanshi">
            演示
        </div>

CSS

　　　　　　　#yanshi{
                width: 100px;
                height: 100px;
                transition: background-color 0.5s,color 0.5s;
                text-align: center;
                margin: 20px auto;
                line-height: 100px;
                border: 1px solid green;
                
            }
            #yanshi:hover{
                background-color: green;
                color: white;
                
            }

2、hover改變子元素的樣式

HTML

        <div id="fir">
            <div class="se"></div>
            <div class="se"></div>
            <div class="se"></div>
            <div class="se"></div>
            <div class="se"></div>
            <div class="se"></div>
            <div class="se"></div>
        </div>

CSS

            #fir{
                width: 820px;
                height: 300px;
                border: 1px solid green;
                margin: 5px auto;
                
            }
            #fir div{
                border: 1px dashed gray;
                width: 100px;
                height: 100px;
                float: left;
                margin: 5px;
                transition: transform 0.5s;
            }
            
            
            div#fir:hover .se{
                transform: rotate(15deg);
            }

hover直接可以批量改變內部元素的樣式，這樣的效果很多用在產品的展示頁面，鼠標懸浮在頁面的一個元素上，不同的產品圖片實現位移，達到很好的交互效果。重要的一點，hover在父元素上，對子元素進行樣式調整。

 

3、hover改變兄弟元素的樣式：（需要在hover之后添加“+”）

HTML不變，變化的CSS部分

            #fir div:hover + .se{
                transform: rotate(15deg);
            }

 

效果

 

 

 

 

可以看到，每次只有一個相鄰矩形應用到了樣式，hover對兄弟元素改變樣式，只對相鄰的兄弟元素起作用。

也可以 #fir div:hover ~ .se 改變所有同級的元素

 

 

 

總結一下：hover對同級別的元素改變樣式，改變的是相鄰兄弟元素的樣式，即一個元素的樣式；對元素的子元素應用hover改變樣式，可以同時起作用。利用偽類改變其他元素的樣式，其他元素須是hover元素的子元素。