背景

鼠標移到A，使B、C、D出現動畫，純用css。
此時此刻，需要使用hover

hover的一般用法

hover的最原始用法是：

a:hover { background-color:yellow; }

鼠標移動到 a標簽上，改變a的背景顏色。
初學的時候都是這么學習的，導致很多人以為只有a標簽才有hover。錯了，hover是針對所有元素的。

hover的進階用法

鼠標指在A元素上，使A元素的子元素B改變了樣式。代碼如下：

<div class="face"><!-- 嘴巴 --><div class="mouth-wrap"><!-- <div class="mouth-top"></div> --><div class="mouth left"></div><div class="mouth right"></div></div> </div>

鼠標移到臉上，嘴巴微笑

.face:hover .mouth-wrap .mouth {border-radius: 40% 0% 50% 50%; }

hover的更高階用法

鼠標移到A，改變兄弟元素B的樣式，代碼如下：

<!-- 臉 --> <div class="face">aaa </div> <!-- 耳朵 --> <div class="ear-wrap"><div class="ear left"> </div><div class="ear right"> </div> </div> .face:hover+.ear-wrap .left{transform: rotate(-45deg); } .face:hover+.ear-wrap .right{transform: rotate(45deg);

引用文章：hover改變另外一個元素

總結

以上是生活随笔為你收集整理的hover如何改变子元素或其他同级元素？（用不了怎么回事？）的全部內容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網站內容還不錯，歡迎將生活随笔推薦給好友。