css：hover伪类的使用
生活随笔
收集整理的這篇文章主要介紹了
css：hover伪类的使用
小編覺得挺不錯的,現在分享給大家,幫大家做個參考.
：hover的使用，即當鼠標指針移入元素時，所做出的樣式設置
示例一
<!DOCTYPE html> <html lang="en"> <head><meta charset="UTF-8"><title>demo01</title><style>*{margin: 0;padding: 0;}ul li{width: 300px;margin-top: 10px;background: #ff0000;}ul li:hover{background: #000000;}</style> </head> <body><ul><li></li><li></li><li></li></ul> </body> </html>?
?以上情況存在于當鼠標指針移入元素，通過：hover使該元素自身改變新的樣式
示例二
<!DOCTYPE html> <html lang="en"> <head><meta charset="UTF-8"><title>demo01</title><style>*{margin: 0;padding: 0;}.container{width: 300px;height: 300px;border: 1px solid #ff9f5a;}.content{width: 100px;height: 100px;background: #27e7ff;}.container:hover .content{background: #000000;}</style> </head> <body><div class="container"><div class="content"></div></div> </body> </html>?以上示例中，當存在父子關系的時候，可以通過父級的：hover使得子級的樣式發生改變，寫法為 .container:hover .content，hover后面有一個空格；但是，子級：hover改變不了父級的樣式
示例三
<!DOCTYPE html> <html lang="en"> <head><meta charset="UTF-8"><title>demo01</title><style>*{margin: 0;padding: 0;}.container{width: 300px;height: 300px;border: 1px solid #ff9f5a;}.content{width: 100px;height: 100px;background: #27e7ff;}.container:hover .content{background: #000000;}</style> </head> <body><div class="container"></div><div class="content"></div> </body> </html>?以上示例，當兩個元素不是父子關系，為同胞兄弟關系時，則通過?.container:hover .content這樣的寫法是無效的，則需要通過“ ”號，即?.container:hover .content才能顯示出效果；但是要注意兩個元素的先后順序哦~
? ? ? 不足之處，請多多指教…
總結
以上是生活随笔為你收集整理的css：hover伪类的使用的全部內容，希望文章能夠幫你解決所遇到的問題。
- 上一篇： 2017年最新基于Bootstrap 4
- 下一篇： Bootstrap源码解读之栅格化篇