有些時候需要用到mouseover和mouseout這兩個滑鼠事件，但是寫js又比較麻煩，還要添加監聽事件，所以能用css解決的東西盡量yongcss解決，這樣可以提高效能，下面說一下我對:hover 的瞭解:
之前在學電腦應用的時候，老師教我們使用了:hover選取器來完成下拉式功能表，之前只知道怎麼使用，並不知道為什麼要這麼用，現在記下怎麼使用吧
定義和用法
定義：
:hover 選取器用於選擇滑鼠指標浮動在上面的元素。
:hover 選取器適用於所有元素
用法1：
這個表示的是：當滑鼠懸浮在a這個樣式上的時候，a的背景顏色設定為黃色
a:hover { background-color:yellow; }
這個是最普通的用法了，只是通過a改變了style
用法2:
使用a 控制其他塊的樣式：
使用a控制a的子項目 b：
.a:hover .b { background-color:blue; }
使用a控制a的兄弟元素 c(同級元素)：
.a:hover + .c { color:red; }
使用a控制a的就近元素d：
.a:hover ~ .d { color:pink; }
總結一下：
1. 中間什麼都不加 控制子項目；
2. ‘+’ 控制同級元素（兄弟元素）；
3. ‘～’ 控制就近元素；
執行個體
用一個按鈕控制一個盒子的運動狀態，當滑鼠移到按鈕上方時，盒子停止運動，滑鼠移開時，盒子繼續運動
body代碼：
<body> <p class="btn stop">stop</p> <p class="animation"></p> </body>
css樣式：
<style> .animation { width: 100px; height: 100px; background-color: pink; margin: 100px auto; animation: move 2s infinite alternate; -webkit-animation: move 2s infinite alternate; } @keyframes move { 0% { transform: translate(-100px, 0); } 100% { transform: translate(100px, 0); } } .btn { padding: 20px 50px; background-color: pink; color: white; display: inline-block; } .stop:hover ~ .animation { -webkit-animation-play-state: paused; animation-play-state: paused; } </style>
實現效果：
相信看了本文案例你已經掌握了方法，更多精彩請關注php中文網其它相關文章！
推薦閱讀：
CSS怪異盒模型和標準盒模型如何使用
css3的動畫序列animation
Start building with 50+ products and up to 12 months usage for Elastic Compute Service
1 on 1 presale consultation
24/7 Technical Support 6 Free Tickets per Quarter Faster Response
Alibaba Cloud offers highly flexible support services tailored to meet your exact needs.
A comprehensive suite of global cloud computing services to power your business
Payment Methods We Support
