Desain template-Jenis Hover HTML di blog untuk teks postingan dan link menu
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. Belajar CSSBelajar HTMLJenis Hover HTMLTutorial Blog
Belum ada komentar untuk "Desain template-Jenis Hover HTML di blog untuk teks postingan dan link menu"