利用CSS hover偽類改變其他元素的總結
阿新 • • 發佈:2019-02-09
自身 log 元素 tool 想要 htm 頁面效果 lin 情況
: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:first-child:hover + .se{ transform: rotate(15deg); }
效果:
可以看到,只有一個矩形應用到了樣式,hover對兄弟元素改變樣式,只對相鄰的兄弟元素起作用。
總結一下:hover對同級別的元素改變樣式,改變的是相鄰兄弟元素的樣式,即一個元素的樣式;對元素的子元素應用hover改變樣式,可以同時起作用。利用偽類改變其他元素的樣式,其他元素須是hover元素的子元素。不當之處,請批評指出。
轉https://www.cnblogs.com/engeng/p/7429095.html
利用CSS hover偽類改變其他元素的總結