Desain template-Jenis Hover HTML di blog untuk teks postingan dan link menu

Salah satu elemen perintah di HTML adalah Hover. Hover berfungsi untuk memberikan efek pada teks dalam postingan, link/tautan berbentuk teks menu maupun gambar pada saat teks dan gambar itu disorot menggunakan pointer komputer. Jenis-jenis Hover yang bisa kamu berikan sebenarnya sangat banyak. Namun pembahasan hover kali ini hanya sebagian kecil saja namun sudah cukuplah buat mendesign ulang template blog kamu.

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 CSS Belajar HTML Jenis Hover HTML Tutorial Blog