Thứ Năm, 18 tháng 12, 2014
Thủ thuật CSS hiển thị ToolTip liên kết khi dê chuột vào link
Thứ Năm, 18 tháng 12, 2014
ToolTip là 1 cái tên gọi thể hiện hành động khi bạn dê chuột qua đối tượng sẽ hiển thị 1 chú thích. Với thủ thuật sẽ mang đến cho bạn đọc thêm cách nhìn mới về Website. Khi thiết kế Blogspot, có rất nhiều bạn hỏi tôi, có cách nào để hiển thị liên kết của 1 hình ảnh hay 1 đường link nào đây mà chúng ta không xem được.
Bài viết hôm nay, Fphn.blogspot.com sẽ giới thiệu cho bạn, được sử dụng 100% là CSS nên bạn hoàn toàn yên tâm về tốc độ và không ảnh hưởng tới mọi thứ xung quanh trên Template của bạn.
Cách thực hiện khá đơn giản, bạn chỉ cần chèn đoạn CSS sau trên ]]></b:skin>
(Dành cho người thiết kế Template Blogspot nhé)
Tags:
Thủ thuật blogger
Bài viết hôm nay, Fphn.blogspot.com sẽ giới thiệu cho bạn, được sử dụng 100% là CSS nên bạn hoàn toàn yên tâm về tốc độ và không ảnh hưởng tới mọi thứ xung quanh trên Template của bạn.
Cách thực hiện khá đơn giản, bạn chỉ cần chèn đoạn CSS sau trên ]]></b:skin>
(Dành cho người thiết kế Template Blogspot nhé)
.post-body a { position:relative; }* Chúc bạn thực hiện thành công! Nếu thích nhớ nhấn Like nhé để tác giả có động lực chia sẻ nhiều hơn nữa và có giá trị.
.post-body a::before {
content:attr(href);
font-size:11px;
line-height:11px;
font-family:Arial,sans-serif;
text-transform:none;
padding:8px 12px;
top:-34px;
right:0px;
transition:.3s ease-out;
background:#222;
color:#fff;
border-radius:5px;
position:absolute;
opacity:0;
visibility:hidden;
}
.post-body a::after {
content:" ";
width:0;
height:0;
right:10px;
top:-7px;
transition:.3s ease-out;
border-color:#222 transparent transparent;
border-style:solid;
border-width:6px 6px 0;
position:absolute;
opacity:0;
visibility:hidden;
}
.post-body a:hover::before, .post-body a:hover::after {
opacity:1.5;
visibility:visible;
}
Đăng ký:
Đăng Nhận xét (Atom)
Không có nhận xét nào:
Đăng nhận xét