Home
thủ-thuật-blog

Hiện thị chi tiết đường link khi HOVER bằng CSS cho Blog

hien thi chi tiet duong link, hien thi duong link
Thủ thuật này giúp hiển thị link khi bạn rê chuột - Hover vào một liên kết bất kỳ trong blog.
Để thêm tính năng này bạn chèn đoạn CSS bên dưới vào trước thẻ đóng ]]></b:skin> 
.post-body a::before {
 content: attr(href);
 float: none;
 clear: both;
 font-size: 22px;
 font-family: "Roboto", sans-serif;
 font-weight: 300px;
 text-transform: none;
 padding: 15px 0;
 background: #fff;
 color: #1A7C62;
 border-radius: 0;
 position: fixed;
 opacity: 0;
 left: 0;
 top: 0;
 visibility: hidden;
 transform: scaleY(0);
 text-overflow: ellipsis;
 overflow: hidden;
 white-space: nowrap;
 text-align: center;
 width: 100%;
 transition: .3s ease-in-out;
 z-index: 999;
 margin: 0 auto;
}
.post-body a:hover::before {
 opacity: 1;
 visibility: visible;
 transform: scaleY(1)
}
THUỘC TÍNH:
- font-family: "Roboto" - font chữ hiển thị.
- font-size: 22px - kích thước font chữ.
- font-weight: 300px - kích thước chiều dài hiển thị link.
- background: #fff - màu nền.
- color: #1A7C62 - màu chữ.
Bạn chỉnh sửa lại các thuộc tính trên theo ý của bạn và nhấn Lưu.