Jenis-jenis hover HTML pada teks seperti efek garis bawah, huruf miring, huruf tebal, perubahan warna teks, perubahan background teks dan perubahan ukuran huruf teks.
Desain template-Jenis Hover HTML di Blog untuk teks
Macam jenis hover HTML di blog sebagai berikut.
1. Hover untuk memberi warna pada teks
Kamu cukup tambahkan kode css berikut.
:hover{ color: #626262; }
Contoh penerapan hover di HTML untuk memberi warna pada teks:
- a:hover{ color: #626262; }
- .sidebar a:hover{text-decoration:none;color: #005E57;}
- #menu ul li:hover a{color:#fff}
- a:hover{color:$(color.theme);} --> Hover ini memberi warna otomatis sesuai warna tema/template yang digunakan. Contoh lagi: #social-top ul li a:hover{color:$(color.theme)}.
Kode text-decoration:none; maksudnya adalah teks tanpa efek dekorasi seperti underline, italic dan bold.
2. Hover untuk memberi dekorasi pada teks
Dekorasi teks (text-decoration) itu seperti garis bawah (underline), garis miring (italic), dan huruf tebal (bold). Untuk menambahkan hover jenis ini dengan menambahkan kode berikut.
:hover{text-decoration:underline; }
Efek hover ini akan membuat garis bawah dengan warna default/standar (biasanya warna hitam). Sedangkan untuk underline dengan warna variasi/custom bisa diberikan seperti contoh berikut.
:hover{text-decoration:underline #23b5ab; }
Untuk memberikan text-decoration yang lain kamu tinggal ganti saja underline dengan italic dan bold.
Contoh penerapan Hover untuk memberi dekorasi pada teks:
- .status-msg-wrap a:hover{text-decoration:underline}
- #error-wrap .homepage:hover{text-decoration:underline}
- a:hover{ color: #626262;text-decoration:underline; }
- #footer-widgets .label a:hover{text-decoration:underline;}
3. Hover untuk mengubah warna background teks
Kamu cukup tambahkan kode css berikut.
:hover {background:#23b5ab;}
Background:#23b5ab; berfungsi untuk member warna hijau pada latarbelakang/dasar.
Contoh penerapan Hover untuk mengubah warna background teks:
- #menu ul li:hover{background-color:#262626}
- .postags a:hover{background:#aaa}
4. Hover untuk memberikan bingkai warna di bawah teks
Kamu cukup tambahkan kode css berikut.
:hover{ border-bottom: 2px solid #23b5ab;}
Contoh penerapan Hover untuk memberikan bingkai warna di bawah teks:
- .menu-secondary li a:hover a{border-bottom:2px solid #23b5ab;}
Begitulah materi desain template tentang jenis Hover HTML di blog untuk teks postingan dan link di Blog ini. Semoga bermanfaat sahabat.
