這次給大家帶來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中文網其它相關文章!
推薦閱讀:
CSS怪異盒模型和標準盒模型如何使用
css3的動畫序列animation