经验首页 前端设计 程序设计 Java相关 移动开发 数据库/运维 软件/图像 大数据/云计算 其他经验
当前位置:技术经验 » HTML/CSS » CSS » 查看文章
css濡備綍璁剧疆涓嶅彲鐐瑰嚮鐨勫疄鐜版柟娉昣CSS鏁欑▼_CSS
来源:jb51  时间:2022/5/9 9:44:25  对本文有异议

鍙互閫氳繃璁剧疆鍏冪礌鐨刾ointer-events灞炴€ц缃负none锛屾潵瀹炵幇鍏冪礌涓嶅彲鐐瑰嚮銆?/p>

姝ゆ柟娉曟槸閫氳繃璁剧疆鍏冪礌鐨勯紶鏍囦簨浠跺け鏁堟潵瀹炵幇鍏冪礌涓嶅彲鐐瑰嚮銆?/p>

pointer-events: none;

CSS pointer-events 灞炴€у畾涔夊厓绱犳槸鍚﹀鎸囬拡浜嬩欢鍋氬嚭鍙嶅簲銆?/p>

灞炴€у€?/th> 鎻忚堪
auto 榛樿鍊笺€傚厓绱犲鎸囬拡浜嬩欢鍋氬嚭鍙嶅簲锛屾瘮濡?:hover 鍜?click銆?/td>
none 鍏冪礌涓嶅鎸囬拡浜嬩欢鍋氬嚭鍙嶅簲銆?/td>
initial 灏嗘灞炴€ц缃负鍏堕粯璁ゅ€笺€傚弬闃?initial銆?/td>
inherit 浠庡叾鐖跺厓绱犵户鎵挎灞炴€с€傚弬闃?inherit銆?/td>

绀轰緥锛?/h3>
<!DOCTYPE html>
<html>
<head>
<style> 
div.ex1 {
  pointer-events: none;
}
 
div.ex2 {
  pointer-events: auto;
}
</style>
</head>
<body>
 
<h1>pointer-events 灞炴€?lt;/h1>
 
<p>璇锋妸榧犳爣鎸囬拡绉昏嚦涓嬮潰鐨勯摼鎺ワ紝鏌ョ湅鏄惁瀵规寚閽堜簨浠跺仛鍑哄弽搴旓細</p>
 
<h2>pointer-events: none锛?lt;/h2>
<div class="ex1">璁块棶 <a href="https://www.w3school.com.cn/html/">HTML 鏁欑▼</a></div>
 
<h2>pointer-events: auto锛堥粯璁わ級</h2>
<div class="ex2">璁块棶 <a href="https://www.w3school.com.cn/css/">CSS 鏁欑▼</a></div>
 
</body>
</html>

娉ㄦ剰锛?/h3>
  • pointer-events 鐨勫€间负 none 鏃讹紝濡傛灉鍏冪礌涓婄粷瀵瑰畾浣嶏紝閭e湪瀹冧笅涓€灞傜殑鍏冪礌鍙互琚€変腑銆?/li>
  • pointer-events: none; 鍙槸鐢ㄦ潵绂佺敤榧犳爣鐨勪簨浠讹紝閫氳繃鍏朵粬鏂瑰紡缁戝畾鐨勪簨浠惰繕鏄細瑙﹀彂鐨勶紝姣斿閿洏浜嬩欢绛夈€?/li>
  • 濡傛灉灏嗕竴涓厓绱犵殑瀛愬厓绱?pointer-events 璁剧疆鎴愬叾浠栧€硷紙姣斿锛歛uto锛夛紝閭d箞褰撶偣鍑诲瓙鍏冪礌鏃讹紝杩樻槸浼氶€氳繃浜嬩欢鍐掓场鐨勫舰寮忓嚭鍙戠埗鍏冪礌鐨勪簨浠躲€?/li>

鍒版杩欑瘒鍏充簬css濡備綍璁剧疆涓嶅彲鐐瑰嚮鐨勫疄鐜版柟娉曠殑鏂囩珷灏变粙缁嶅埌杩欎簡,鏇村鐩稿叧css璁剧疆涓嶅彲鐐瑰嚮鍐呭璇锋悳绱㈣剼鏈箣瀹朵互鍓嶇殑鏂囩珷鎴栫户缁祻瑙堜笅闈㈢殑鐩稿叧鏂囩珷锛屽笇鏈涘ぇ瀹朵互鍚庡澶氭敮鎸佽剼鏈箣瀹讹紒

 友情链接: NPS