Trang chủ
CSS
Chú giải công cụ CSS
Dùng thử: Làm mờ trong chú giải công cụ
Chạy ❯
Nhận trang web của
riêng
bạn
×
Thay đổi định hướng
Lưu mã
Thay đổi chủ đề, Tối/Sáng
Đi tới Không gian
<!DOCTYPE html> <html> <style> .tooltip { vị trí: tương đối; hiển thị: khối nội tuyến; viền dưới: 1px chấm đen; } .tooltip .tooltiptext { khả năng hiển thị: ẩn; chiều rộng: 120px; màu nền: đen; màu sắc: #fff; căn chỉnh văn bản: giữa; bán kính đường viền: 6px; phần đệm: 5px 0; vị trí: tuyệt đối; chỉ số z: 1; đáy: 100%; trái: 50%; lề trái: -60px; /* Làm mờ trong chú giải công cụ - mất 1 giây để tăng từ 0% lên 100% opac: */ opacity: 0; chuyển tiếp: độ mờ 1s; } .tooltip:hover .tooltiptext { khả năng hiển thị: hiển thị; độ mờ: 1; } </style> <body style="text-align:center;"> <h2>Làm mờ dần chú giải công cụ khi di chuột</h2> <p>Khi bạn di chuyển chuột qua văn bản bên dưới, văn bản chú giải công cụ sẽ mờ dần và mất 1 giây để chuyển từ hoàn toàn ẩn sang hiển thị.</p> <div class="tooltip">Di chuột qua tôi <span class="tooltiptext">Văn bản chú giải công cụ</span> </div> </body> </ html>