Làm thế nào để vô hiệu hóa liên kết (link) bằng CSS?

Anonymous
Anonymous


Vô hiệu hóa liên kết (link) có nghĩa là làm cho liên kết đó mất khả năng truy cập. Còn dùng nó để làm gì thì tớ không biết vì việc đó phù thuộc vào mục đích của các ông thui chứ nhỉ😄.

Ví dụ:

Để làm được điều này ta chỉ cần sử dụng những thuộc tính có sẵn của CSS

Cách vô hiệu hóa liên kết bằng CSS

Trong CSS ta chỉ cần sử dụng hai thuộc tính có sẵn đó là
pointer-events: none;
Trong đó
pointer-events: noneSử dụng để vô hiệu hóa các sự kiện chuột lên phần tử như nhấp chuột,...
Với thuộc tính trên, thì mọi nhập chuột vào liên kết được thiết lập thuộc tính đó sẽ bị bỏ qua, và do đó liên kết sẽ không được mở

Bản ví dụ

<!DOCTYPE html> 
<html>  
<head> 
    <title>Làm thế nào để vô hiệu hóa liên kết (link) bằng CSS?</title> 
    <style type="text/css"> 
        .disable { 
            pointer-events: none; 
        } 
    </style> 
</head> 
<body>
      Liên kết này sẽ có thể mở khi nhấp vào<br/>
      <a href="https://codevodoi.blogspot.com"> 
           Tôi có thể được mở
      </a><br/>
      Liên kết này không thể mở khi nhấp vào
      <a class='disable' href="https://codevodoi.blogspot.com"> 
           Tôi không thể mở được 
      </a>  
</body> 
</html>
Liên kết này sẽ có thể mở khi nhấp vào
Tôi có thể được mở
Liên kết này không thể mở khi nhấp vào
Tôi không thể mở được
CSS