Cách tạo toàn bộ div có thể nhấp với CSS

Question

Đôi khi bạn muốn tạo toàn bộ div (hoặc phần tử khác) thành liên kết có thể nhấp. Đây là một ví dụ.

Đây là một cách qua trình duyệt để làm điều đó sử dụng CSS tinh khiết:

HTML: 

<div class="clickable"> 
    <a href="URL_OF_LINK_TARGET"> </a> 
    Rest of div content goes here 
</div> 
CSS: 

div.clickable { /* Containing div must have a position value */ 
    position:relative; 
} 
div.clickable a { 
    position:absolute; 
    width:100%; 
    height:100%; 
    top:0; 
    left:0; 
    text-decoration:none; /* Makes sure the link doesn't get underlined */ 
    z-index:10; /* raises anchor tag above everything else in div */ 
    background-color:white; /*workaround to make clickable in IE */ 
    opacity: 0; /*workaround to make clickable in IE */ 
    filter: alpha(opacity=1); /*workaround to make clickable in IE */ 
} 

Thứ nhất, cung cấp cho các vị trí div chứa. Bằng cách đó, khi chúng ta áp dụng "vị trí: tuyệt đối;" cho liên kết (xem đoạn tiếp theo), nó sẽ định vị chính nó liên quan đến div chứa.

Tiếp theo, đặt liên kết ở vị trí hoàn toàn và kích thước đầy đủ và chiều sâu của div chứa. Chỉ mục z của liên kết đảm bảo rằng nó ở trên mọi thứ khác trong div, vì vậy bất kể bạn nhấp vào đâu, bạn đang nhấp vào liên kết.

IE, tự nhiên, có tiếng lạ. Trong trường hợp này, IE yêu cầu màu nền cho một liên kết có thể nhấp được, vì vậy chúng tôi cho nó màu nền (màu trắng), đặt độ mờ thành 0, sau đó cung cấp độ mờ chỉ 1% của IE bằng cách sử dụng thuộc tính bộ lọc độc quyền của IE .

Cuối cùng, hãy đặt bất kỳ nội dung nào bạn muốn vào div. Nếu bạn sắp xếp nội dung bằng cách sử dụng chỉ mục z, chỉ cần đảm bảo không cho bất kỳ phần tử nào có chỉ mục z cao hơn liên kết.

Answer 1

Bạn có thể bao bọc div trong một liên kết và đó là HTML5 hợp lệ.

<a href="#"> 
     <div></div> 
</a>