Biggerlink cơ bản
Khi cần những hover cả nguyên box, bao gồm những nội dung bên trong, chúng ta không thể sử dụng đơn giản bằng tag a bao ngoài được vì sẽ không còn tuân theo chuẩn W3C, để giải quyết việc này chúng ta dùng plugin Biggerlink.
Biggerlink
Biggerlink dùng để tạo vùng liên kết tràn đầy một thành phần block.
Chú ý là không nên tạo vùng liên kết bằng cách sử dụng tag <a> bao ngoài thành phần block vì nó không đúng chuẩn W3C.
Trình duyệt
6
3
9
9
3
Html viết:
<!DOCTYPE HTML> <html> <head> <meta charset="utf-8"> <title>Học Web Chuẩn</title> <script src="https://hocwebchuan.com/example/js/jquery-1.8.3.min.js"></script> <script src="https://hocwebchuan.com/example/js/biggerlink.js"></script> <script> //Đây là đoạn gọi function .biggerlink() $(function(){ $('.blockList').biggerlink(); }); </script> <style> * { /* reset lại margin và padding cho các tag */ margin: 0; padding: 0; } .blockList { width:280px; padding:10px; border:1px solid #CCC; } /*Đây là class được biggerlink.js thêm vào dành để điều khiển hover*/ .bl-hover { background: #CFF; } .blockList a { color:#f00; text-decoration:none; } </style> </head> <body> <div class="blockList"> <h3><a href="https://hocwebchuan.com">Biggerlink</a></h3> <p>Nội dung của thành phần khối, nội dung này sẽ xuống hàng khi gặp giới hạn chiều rộng của thẻ bao ngoài nội dung này sẽ xuống hàng khi gặp giới hạn chiều rộng của thẻ bao ngoài.</p> </div> </body> </html>
Hiển thị trình duyệt:
Chú ý: bắt buộc trong thành phần khối bắt buộc phải có thành phần liên kết <a>
Tham khảo thêm tại: biggerlink