Tạo mô tả cho link trong bài viết

Ở bài viết này mình sẽ giới thiệu 2 thủ thuật để tạo hiệu ứng mô tả cho các liên kết trong bài viết. Đó là sử dụng CSS và cách 2 là dùng Javascript có khác chút so với bài trước đây . Và bài viết này sẽ thực hiện dưới dạng thủ công.
Do thủ thuật này đơn giản nên mình sẽ đưa hình minh họa, không có demo.

Hình minh họa:

Dùng CSS

Dùng Javascript

Sau đây là code của thủ thuật và ưu khuyết điểm của việc dùng 2 cách trên:

a. Cách dùng CSS :
- Cách thực hiện :

+ chèn đoạn code bên dưới vào trước thẻ đóng </head> trong code template:

.mota-kvn{
position: relative;
z-index: 0;
text-decoration:none;
}

.mota-kvn:hover{
background-color: transparent;
z-index: 50;
}

.mota-kvn span{
position: absolute;
background-color: #ffffff;
padding: 5px;
left: -1000px;
border: 1px solid #000;
visibility: hidden;
color: black;
text-decoration: none;
}

.mota-kvn span img{
border-width: 0;
padding: 2px;
}

.mota-kvn:hover span{
padding:5px;
visibility: visible;
top: 20px;
left:50px;
width:250px;
background:#ccc;
text-align: justify;
}

+ Thực hiện cho liên kết trong bài viết:
ví dụ ta có liên kết như bên dưới :

<a href="link">Link 1</a>

và ta sẽ thêm code vào như bên dưới:

<a class="mota-kvn" href="link">Link 1<span>{NỘI DUNG CỦA PHẦN MÔ TẢ}</span></a>

- Ưu điểm là có thể thêm thuộc tính CSS vào trong các thẻ của phần mô tả.
- Nhược điểm :
+ vị trí xuất hiện sẽ là cố định.
+ không dùng được thẻ span trong phần mô tả, nếu dùng nó sẽ như thế này :

Code của hình minh họa sẽ là như thế này :

<a class="mota-s2" href="#">Link<span>test cai coi <span style="font-weight:bold;">blog FD</span></span></a>

- Thẻ span màu đỏ là thẻ để chứa phần mô tả, nếu bạn dùng 1 thẻ span khác (thẻ span màu xanh) trong thẻ này thì sẽ bị lỗi như trên, tức nó sẽ hiểu là 1 mô tả nhỏ trong phần mô tả lớn.

b. Cách dùng Javascript:
- Cách thực hiện : Xem ở đây
- Ưu điểm : hiển thị đẹp và di chuyển theo chuột khi ta rê chuột vào liên kết.
- Khuyết điểm: không dùng được các kí tự " và ' trong phần mô tả, nên sẽ không thêm được thuộc tính CSS vào trong các thẻ ở phần mô tả. Do đó phần mô tả sẽ chỉ đơn thuần là văn bản, sẽ không thêm hình ảnh vào được.

Chúc các bạn thành công.

Theo: Fandung.