hover选择器如何使用
这次给大家带来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>实现效果：
相信看了本文案例你已经掌握了方法，更多精彩请关注Gxl网其它相关文章！
推荐阅读：
CSS怪异盒模型和标准盒模型如何使用
css3的动画序列animation
绛旓細浣跨敤Vue鏉ュ疄鐜伴紶鏍囨偓鍋滄晥鏋溿傚彲浠ヤ娇鐢ㄤ簨浠跺鐞嗗櫒v-on鎸囦护锛堢畝鍐欎负锛欯锛夋潵瀹屾垚銆備负鏍囩缁戝畾mouseenter浠ュ強mouseleave浜嬩欢鍗冲彲銆hover鏄痗ss涓殑閫夋嫨鍣锛岀敤浜庨夋嫨榧犳爣鎸囬拡娴姩鍦ㄤ笂闈㈢殑鍏冪礌銆傛墍浠:hover鍙敤浜庤缃綋榧犳爣鎮仠鍦ㄨ秴閾炬帴涔嬩笂鏃惰秴閾炬帴鐨勬牱寮忋
绛旓細闂鍒嗘瀽锛浣跨敤Vue鏉ュ疄鐜伴紶鏍囨偓鍋滄晥鏋溿傚彲浠ヤ娇鐢ㄤ簨浠跺鐞嗗櫒v-on鎸囦护锛堢畝鍐欎负锛欯锛夋潵瀹屾垚銆備负鏍囩缁戝畾mouseenter浠ュ強mouseleave浜嬩欢鍗冲彲銆備妇渚嬪涓嬶細浠ヤ笅妗堜緥灏嗘紨绀洪紶鏍囨偓鍋滃湪鏍囩涓婏紝鍐呭鍙戠敓鏀瑰彉锛岃岀寮鏃跺唴瀹瑰啀娆″彂鐢熸敼鍙樸侶TML浠ｇ爜锛 {{ message }}Vue浠ｇ爜锛歷ar vm = new Vue({ el: '#app', ...
绛旓細浣跨敤CSS :hover 浼被鍙互杈惧埌杩欎釜鏁堟灉銆傚畾涔夊拰鐢ㄦ硶 :hover 閫夋嫨鍣鐢ㄤ簬閫夋嫨榧犳爣鎸囬拡娴姩鍦ㄤ笂闈㈢殑鍏冪礌銆傛彁绀猴細:hover 閫夋嫨鍣ㄥ彲鐢ㄤ簬鎵鏈夊厓绱狅紝涓嶅彧鏄摼鎺ャ傛彁绀猴細:link 閫夋嫨鍣ㄨ缃寚鍚戞湭琚闂〉闈㈢殑閾炬帴鐨勬牱寮忥紝:visited 閫夋嫨鍣ㄧ敤浜庤缃寚鍚戝凡琚闂殑椤甸潰鐨勯摼鎺ワ紝:active 閫夋嫨鍣ㄧ敤浜庢椿鍔ㄩ摼鎺ャ傛敞閲婏細鍦 CSS ...
绛旓細閫夋嫨榧犳爣鎸囬拡娴姩鍦ㄥ叾涓婄殑鍏冪礌锛屽苟涓哄叾璁剧疆鏍峰紡銆傚綋鐢ㄦ埛灏嗛紶鏍囨偓鍋滃湪鏌愪釜鍏冪礌涓婃椂锛屽彲浠浣跨敤锛hover閫夋嫨鍣鏉ユ敼鍙樿鍏冪礌鐨勫瑙傘傚鍙互浣跨敤锛歨over閫夋嫨鍣ㄦ潵鏀瑰彉涓涓摼鎺ョ殑棰滆壊鎴栨坊鍔犱竴涓笅鍒掔嚎銆俬over閫夋嫨鍣ㄩ傜敤浜庨摼鎺ワ紙a鍏冪礌锛夛紝杩樺彲浠ュ簲鐢ㄤ簬浠讳綍鍏冪礌锛屼娇寰楀紑鍙戜汉鍛樺彲浠ュ疄鐜版洿澶氫氦浜掑紡鍜屽姩鎬佺殑鏍峰紡鏁堟灉銆
绛旓細璇ラ紶鏍囩Щ鍔ㄥ埌鎸囧畾浣嶇疆鍙樿壊鐨勫疄鐜版柟娉曟槸浣跨敤CSS閫夋嫨鍣鍜屼吉绫汇佹寚瀹氳搴旂敤鐨勬牱寮忋佹敞鎰忛夋嫨鍣ㄥ尮閰嶆潯浠躲1銆佷娇鐢–SS閫夋嫨鍣ㄥ拰浼被锛氳幏鍙栬淇敼鏍峰紡鐨勫厓绱狅紝浣跨敤CSS閫夋嫨鍣ㄩ変腑瑕佹搷浣滅殑鍏冪礌锛屽苟浣跨敤浼被鈥滐細hover鈥濇潵鎸囧畾褰撻紶鏍囨偓鍋滃湪璇ュ厓绱犱笂鏃跺簲鐢ㄧ殑鏍峰紡銆2銆佹寚瀹氳搴旂敤鐨勬牱寮忥細渚嬪锛屽鏋滄偍鏈変竴涓厓绱營D涓衡...
绛旓細4. `:first-child` 鍜 `:last-child`锛氳繖涓や釜浼被閫夋嫨鍣鐢ㄤ簬閫夋嫨鐗瑰畾鍏冪礌鐨勫瓙鍏冪礌鎴栧瓩瀛愬厓绱犮:first-child 閫夋嫨鍣ㄧ敤浜庨夋嫨浣滀负鐖跺厓绱犵殑绗竴涓瓙鍏冪礌锛岃 :last-child 閫夋嫨鍣ㄥ垯鐢ㄤ簬閫夋嫨浣滀负鐖跺厓绱犵殑鏈鍚庝竴涓瓙鍏冪礌銆傛嫇灞曠煡璇嗭細杩欎簺浼被閫夋嫨鍣ㄥ湪CSS涓潪甯告湁鐢紝鍥犱负瀹冧滑鍏佽浣犳牴鎹厓绱犵殑鐗瑰畾鐘舵侊紙濡...
绛旓細杩欏彧鏄疌SS閫夋嫨鍣涓殑涓绉嶏紝css杩樻彁渚涗簡鍏朵粬鐨勯夋嫨鍣ㄣ傝缁嗚鏌ョ湅锛歨ttp://www.w3school.com.cn/css/css_selector_class.asp 浠ヤ笅涓鸿嚜宸辩殑瑙佽В锛欳SS鎻愪緵鐨勮繖浜涢夋嫨鍣紝鍗曚竴鐨勬儏鍐碉紝杩樻瘮杈冨ソ鍖哄垎锛屼絾鏄鑰呯粨鍚堬紝鏈厤缁欏垵鎺ヨЕCSS鐨勭闉嬪甫鏉ヨ糠鎯戙傛瘮濡傦細>鍚庝唬閫夋嫨鍣 涓 鍏冪礌閫夋嫨鍣+绫婚夋嫨鍣ㄧ粨鍚浣跨敤...
绛旓細:link - 鏈闂殑閾炬帴銆傝繖涓吉绫閫夋嫨鍣鍖归厤鎵鏈夋湭琚闂繃鐨勮秴閾炬帴銆傜ず渚嬶細a:link { color: blue; } :visited - 宸茶闂殑閾炬帴銆傝繖涓吉绫婚夋嫨鍣ㄥ尮閰嶆墍鏈夎璁块棶杩囩殑瓒呴摼鎺ャ傜ず渚嬶細a:visited { color: purple; } :hover - 榧犳爣鎮仠鍦ㄩ摼鎺ヤ笂銆傝繖涓吉绫婚夋嫨鍣ㄥ尮閰嶅綋鍓嶉紶鏍囨偓鍋滃湪涓婇潰鐨勮秴閾炬帴銆傜ず渚嬶細a...
绛旓細浣跨敤CSS閫夋嫨鍣锛氳繖涓夐」鐨勫姛鑳芥槸鍙互璁惧畾閾炬帴鏂囨湰鐨勬牱寮忓湪閫夋嫨鍣ㄤ笅鎷夊垪琛ㄤ腑鍐呭畾浜嗗洓涓夐」: a:active銆鈥斺斿畾涔夐摼鎺ヨ婵娲绘椂鐨勬牱寮忥紝鍗抽紶鏍囧凡缁忕偣鍑讳簡閾炬帴锛屼絾椤甸潰杩樻病鏈夎烦杞椂銆 a:hover銆鈥斺斿畾涔変簡榧犳爣鎮诞鍦ㄩ摼鎺ユ枃瀛椾笂鏃剁殑鏍峰紡銆 a:link銆鈥斺斿畾涔変簡閾炬帴鏂囧瓧鐨勬牱寮忋 a:visited銆鈥斺旀祻瑙堣呭凡缁...
绛旓細2.鍦╰est.html鏂囦欢涓紝灏唗able鏍囪鐨刢lass灞炴ц缃负mytable锛屽皢border璁剧疆涓1px銆3.鐒跺悗鍦╟ss鏍囩涓紝鎸夌被璁剧疆琛ㄦ牸鐨勬牱寮忥紝灏嗗叾瀹藉害瀹氫箟涓300px锛岄珮搴﹀畾涔変负200px銆4.鍦╟ss鏍囪涓紝瀹氫箟td鍏冪礌鍚嶇О鍜屸:hover鈥閫夋嫨鍣锛屼互鏇存敼鍗曞厓鏍肩殑鑳屾櫙鑹诧紝骞跺湪榧犳爣鎸囧悜鍗曞厓鏍兼椂灏嗗叾璁剧疆涓虹孩鑹层5.鏈鍚庯紝鍦ㄦ祻瑙堝櫒...
