這次帶給大家hover選擇器如何使用,hover選擇器使用的注意事項有哪些,以下就是實戰案例,一起來看一下。
有些時候需要用到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中文網其它相關文章! 推薦閱讀:
以上是hover選擇器如何使用的詳細內容。更多資訊請關注PHP中文網其他相關文章!