Pada CSS kita dapat mengatur gaya / style ketika disentuh / hover pada suatu atau beberapa element. Ada beberapa kondisi pada HTML yang membedakan penerapan kode CSS nya. Pada artikel ini akan saya jelaskan beberapa kondisi serta contohnya, di simak ya…

Dalam Satu Bungkus

Jika class / id element berada berdekatan atau berada di satu bungkus yang sama maka pembuatannya akan sangat mudah dan cara ini pasti sudah diketahui banyak orang. Maksudnya berdekatan / satu bungkus adalah seperti ini contohnya:

<div class="element1">
	<h3 class="h31">You Know My Name 1</h3>
	<h3 class="h32">You Know My Name 2</h3>
</div>

Saya contohkan menggunakan text dan warnanya sudah saya tentukan warna merah tapi nanti ketiak hover akan mengganti warna pada element lain, misalnya ketika class h31 disentuh akan mengganti warna class h32 menjadi kuning maka code nya seperti ini:

.h31 {
	color: red;
}
.h32 {
	color: red;
}
.h31:hover + .h32 {
	color: yellow;
}

Silahkan dicoba!

Standar

Standar maksudnya element biasa yang tidak menggunakan tag tapi posisinya mirip-mirip dengan cara pertama. Misalnya terdapat 2 element berbeda didalam bungkus yang sama seperti ini:

<div class="element1">
	<h3>You Know My Name 1</h3>
	<h2>You Know My Name 2</h2>
</div>

h3 dan h2 diberi warna yang sama yaitu warna merah dan ketika h3 disentuh akan merubah warna h2, disini contoh untuk satu bungkus tanpa class. Maka CSS nya cukup terapkan seperti ini:

.element1 h3 {
	color: red;
}
.element1 h2 {
	color: red;
}
.element1 h3:hover + h2 {
	color: yellow;
}

Jika ingin dibalik keadaannya, silahkan ubah posisi penempatan h3 dan h2 nya pada CSS ini. Silahkan dicoba !

Merubah Element yang Berada di Bungkus Berbeda

Misalnya pada bungkus pertama terdapat h3 dan pada bungkus kedua terdapat h3 dan h2 seperti ini:

<div class="element1">
	<h3>You Know My Name 1</h3>
</div>

<div class="element2">
	<h3>You Know My Name 1</h3>
	<h2>You Know My Name 1</h2>
</div>

Saya ingin memberi efek pada h3 di bungkus kedua ketika bungkus pertama disentuh, seperti biasa warna tulisannya merah dan efeknya diterapkan dengan warna kuning maka CSS nya seperti ini:

.element1 h3 {
	color: red;
}
.element2 h3, h2 {
	color: red;
}
.element1:hover ~ .element2 h3 {
	color: yellow;
}

Cukup terapkan pembungkusnya saja yang diberi hover (.element1:hover) tidak perlu ditambah lebih spesifik (.element1 h3:hover). Tapi pada pemanggilan (yang diberikan efek) perlu ditampilkan pembungkus dan element nya.

Masih bingung ? Lihat : Video tutorial membuat hover untuk elemen lain HTML CSS.

Catatan: Disini saya contohkan secara sederhana saja, soal struktur HTML nya silahkan disesuaikan saja dengan yang kalian miliki. Hal ini juga berlaku ketika kalian menggunakan Framework Bootstrap tapi nama class nya jangan sampai sama dengan nama class yang telah dibuat oleh Bootstrap karena pasti bentrok nantinya.

Selamat mencoba !