css中的hover怎么用
hover用于选择鼠标指针浮动在上面的元素，它有以下几种用法：直接在悬浮元素上改变样式，改变子元素的样式，改变同级元素的样式以及改变就近元素的样式等
在CSS中有个hover属性，当鼠标移上去的时候可以将其激活，它可以用来实现类似于js的一些功能。接下来在文章中将为大家具体介绍hover属性如何使用，希望对大家有所帮助。
【推荐课程：CSS教程】
hover的定义
:hover 选择器用于选择鼠标指针浮动在上面的元素，它适用于所有元素
:hover 选择器适用于所有元素
hover的用法
用法一：鼠标悬浮在元素上改变元素样式
例：当鼠标悬浮在字体上，字体颜色发生改变
<style>
h1:hover{
color: pink;
}
</style>
</head>
<body>
<h1>PHP中文网</h1>
</body>效果图：
这个是最普通的用法了，只是改变了style样式
用法2：通过hover控制其他块的样式
这个用法可以有分为以下三种样式
（1）控制子元素的样式
<style>
h1:hover p{
background-color: pink;
}
</style>
</head>
<body>
<h1>PHP中文网
<p>hover的用法</p>
</h1>效果图：
（2）控制兄弟元素的样式
‘+’ 控制同级元素（兄弟元素）
<style>
h1:hover+p{
background-color: pink;
}
</style>
</head>
<body>
<h1>PHP中文网</h1>
<p>hover的用法</p>效果图：
（3）控制就近元素的样式
‘～’ 控制就近元素
<style>
h1:hover~p{
background-color: pink;
}
</style>
</head>
<body>
<h1>PHP中文网</h1>
<p>hover的用法</p>效果图：
总结：
绛旓細鍦–SS涓紝hover鏄竴绉嶄吉绫婚夋嫨鍣紝鐢ㄤ簬閫夋嫨榧犳爣鎸囬拡鎮仠鍦ㄤ笂闈㈢殑鍏冪礌锛屽綋鐢ㄦ埛灏嗛紶鏍囨偓鍋滃湪鍏冪礌涓婃椂锛屽彲浠ヤ娇鐢╤over`鏉ュ簲鐢ㄤ竴浜涙牱寮忓彉鍖栥備互涓嬫槸涓浜涘父瑙佺殑鐢ㄦ硶锛1銆佹敼鍙橀紶鏍囨偓鍋滄椂鐨勫厓绱犳牱寮忋備緥濡傦紝a锛歨over{color锛歳ed}锛屽綋榧犳爣鎮仠鍦ㄩ摼鎺ヤ笂鏃讹紝閾炬帴鐨勯鑹插皢鍙樹负绾㈣壊銆2銆佹敼鍙樺瓙鍏冪礌鏍峰紡銆備緥濡傦紝child锛...
绛旓細鏀瑰彉鍏冪礌鐨勮儗鏅鑹诧紝鏀瑰彉鍏冪礌鐨勫瓧浣撳ぇ灏銆1銆佹敼鍙樺厓绱犵殑鑳屾櫙棰滆壊锛氬綋榧犳爣鎮仠鍦ㄥ厓绱犱笂鏃讹紝鏀瑰彉hover鍦╟ss鍏冪礌鐨勮儗鏅鑹层2銆佹敼鍙樺厓绱犵殑瀛椾綋澶у皬锛氬綋榧犳爣鎮仠鍦ㄥ厓绱犱笂鏃讹紝鏀瑰彉hover鍦╟ss鍏冪礌鐨勫瓧浣撳ぇ灏忋
绛旓細hover鐢ㄤ簬閫夋嫨榧犳爣鎸囬拡娴姩鍦ㄤ笂闈㈢殑鍏冪礌锛瀹冩湁浠ヤ笅鍑犵鐢ㄦ硶锛氱洿鎺ュ湪鎮诞鍏冪礌涓婃敼鍙樻牱寮忥紝鏀瑰彉瀛愬厓绱犵殑鏍峰紡锛屾敼鍙樺悓绾у厓绱犵殑鏍峰紡浠ュ強鏀瑰彉灏辫繎鍏冪礌鐨勬牱寮忕瓑鍦–SS涓湁涓猦over灞炴锛屽綋榧犳爣绉讳笂鍘荤殑鏃跺欏彲浠ュ皢鍏舵縺娲伙紝瀹冨彲浠ョ敤鏉ュ疄鐜扮被浼间簬js鐨勪竴浜涘姛鑳姐傛帴涓嬫潵鍦ㄦ枃绔犱腑灏嗕负澶у鍏蜂綋浠嬬粛hover灞炴у浣曚娇鐢紝甯屾湜瀵瑰ぇ...
绛旓細鍦–SS涓環over鐢ㄤ簬閫夋嫨榧犳爣鎸囬拡娴姩鍦ㄤ笂闈㈢殑鍏冪礌銆傚綋榧犳爣鎮仠鍦ㄥ厓绱犱笂鏃讹紝鍙互閫氳繃鏇存敼鍏冪礌鐨勬牱寮忔潵鎻愪緵鍙嶉鎴栦氦浜掋俬over浼被鍙互搴旂敤浜庡ぇ澶氭暟HTML鍏冪礌锛屽寘鎷摼鎺ャ佹寜閽佸浘鍍忋佽〃鍗曞厓绱犲拰鏂囨湰绛夈傞粯璁ゆ儏鍐典笅锛宧over鍦ㄩ紶鏍囨偓鍋滃厓绱犱笂鏃惰Е鍙戯紝杩欓氬父閫傜敤浜庨摼鎺ャ佹寜閽瓑鍏冪礌銆傞夋嫨閫氳繃hover鏇存敼鏍峰紡鐨勮繃娓℃晥鏋溿傝繃娓...
绛旓細zip|1銆佺敤鑴氭湰锛坖s鎴杍query锛夊疄鐜帮細onmouseover鐨勬椂鍊欐樉绀烘挱鏀炬寜閽眰(div),onmouseout鐨勬椂鍊欏啀闅愯棌鎾斁鎸夐挳灞傘2銆佺敤css瀹炵幇锛:hover 浼被鍦ㄩ紶鏍囩Щ鍒板厓绱犱笂鏃跺悜姝ゅ厓绱犳坊鍔犵壒娈婄殑鏍峰紡銆傚涓嬫槸鎴戝仛鐨勪竴涓皬妗堜緥(css瀹炵幇)锛屾瘮杈冪畝鍗曪紝鎻愪緵涓绉嶆濊矾銆傘愭簮浠ｇ爜瑙侀檮浠讹紝浠呬緵瀛︿範鍙傝浣跨敤銆戙
绛旓細:hover 閫夋嫨鍣ㄩ傜敤浜庢墍鏈夊厓绱犵敤娉1锛氳繖涓〃绀虹殑鏄細褰撻紶鏍囨偓娴湪a杩欎釜鏍峰紡涓婄殑鏃跺欙紝a鐨勮儗鏅鑹茶缃负榛勮壊a:hover { background-color:yellow; }杩欎釜鏄渶鏅氱殑鐢ㄦ硶浜嗭紝鍙槸閫氳繃a鏀瑰彉浜唖tyle鐢ㄦ硶2:浣跨敤a 鎺у埗鍏朵粬鍧楃殑鏍峰紡锛氫娇鐢╝鎺у埗a鐨勫瓙鍏冪礌 b锛 .a:hover .b { background-color:blue; }...
绛旓細hover浼被鍙互搴旂敤浜庡ぇ澶氭暟css鍏冪礌锛屽寘鎷摼鎺ャ佹寜閽佸浘鍍忋佽〃鍗曞厓绱犲拰鏂囨湰绛夈浣跨敤hover浼被鐨勮娉曞緢绠鍗曪紝鍙渶瑕佸湪閫夋嫨鍣ㄥ悗闈㈠姞涓婏細hover鍗冲彲銆備緥濡俤iv锛歨over {background-color锛歽ellow}銆傝繖娈典唬鐮佽〃绀哄綋鐢ㄦ埛鎶婇紶鏍囨斁鍦╠iv鍏冪礌涓婃椂锛宒iv鐨勮儗鏅鑹蹭細鍙樻垚榛勮壊銆傛垨鑰呴氳繃hover鎺у埗鍏朵粬鍧楃殑鏍峰紡銆備緥濡傦細item鏄...
绛旓細:hover 閫夋嫨鍣ㄧ敤浜庨夋嫨榧犳爣鎸囬拡娴姩鍦ㄤ笂闈㈢殑鍏冪礌銆備緥瀛愪竴锛氶夋嫨鏈闂佸凡璁块棶銆佹偓娴拰娲诲姩閾炬帴锛屽苟璁剧疆瀹冧滑鐨勬牱寮忥細a:link {color:blue;} a:visited {color:blue;} a:hover {color:red;} a:active {color:yellow;} 渚嬪瓙浜岋細渚嬪瓙 2 涓洪摼鎺ヨ缃笉鍚岀殑鏍峰紡锛歛.ex1:hover,a.ex1:active {...
绛旓細浣跨敤CSS :hover 浼被鍙互杈惧埌杩欎釜鏁堟灉銆傚畾涔夊拰鐢ㄦ硶 :hover 閫夋嫨鍣ㄧ敤浜庨夋嫨榧犳爣鎸囬拡娴姩鍦ㄤ笂闈㈢殑鍏冪礌銆傛彁绀猴細:hover 閫夋嫨鍣ㄥ彲鐢ㄤ簬鎵鏈夊厓绱狅紝涓嶅彧鏄摼鎺ャ傛彁绀猴細:link 閫夋嫨鍣ㄨ缃寚鍚戞湭琚闂〉闈㈢殑閾炬帴鐨勬牱寮忥紝:visited 閫夋嫨鍣ㄧ敤浜庤缃寚鍚戝凡琚闂殑椤甸潰鐨勯摼鎺ワ紝:active 閫夋嫨鍣ㄧ敤浜庢椿鍔ㄩ摼鎺ャ傛敞閲婏細鍦 CSS ...
绛旓細1銆佹柟娉曚竴锛屽埄鐢╤tml鐗规э紝姣忎釜鏍囩閮芥湁涓涓猼itle灞炴с傚綋榧犳爣hover鍦ㄨ鏍囩鍐呭涓婃椂锛屾祻瑙堝櫒灞曠ず鍑鸿鏍囩鐨則itle鍐呭锛岃榧犳爣绉昏蛋锛屽唴瀹规秷澶憋紝濡備笅锛歞iv{ height:100px;width:100px;background-color: aqua;} 鏂囧瓧鍐呭鏂囧瓧鍐呭 2銆佹柟娉曚簩锛屽埄鐢css鐨浼被hover锛屼互鍙婃樉绀洪殣钘忓睘鎬isplay锛屾潵瀹炵幇濡備笅锛...
