純css實現點選連結無效程式碼例項

admin發表於2017-02-11
CSS
本章節介紹一下如何利用純css實現點選連結不會發生跳轉效果。

此效果通常使用javascript實現，只要將連結的點點選事件處理函式中新增return false即可實現，本章節介紹一下如何利用純css實現此功能，程式碼例項如下:

[HTML] 純文字檢視 複製程式碼執行程式碼
<!DOCTYPE html>
<html>
<head>
<meta charset=" utf-8">
<meta name="author" content="http://www.softwhy.com/" />
<title>螞蟻部落</title>
<style type="text/css"> 
a{ 
  text-decoration:none; 
  outline:0 none;
  font-size:12px;
} 
.disable{ 
  pointer-events:none; 
  color:#afafaf;
  cursor:pointer; 
} 
</style> 
</head> 
<body> 
<a class="disable" href="http://www.softwhy.com/">百度</a> 
</body> 
</html>

以上程式碼實現了我們的要求，就是為連結新增了pointer-events:none，這樣連結就失去它原有的一些特色。

相關文章