Bagaimana Cara Mempengaruhi Elemen Lain Ketika Salah Satu Elemen Di-Hover

Hover merupakan salah satu selector CSS yang akan aktif ketika kita mengarahkan mouse ke element tertentu. Dengan melakukan hover pada sebuah element kita dapat mengatur ulang properti CSS yang terdapat pada element tersebut. Misalkan properti bakground, color, margin dll.

Jika ingin memberikan efek hover pada sebuah element dapat menggunakan sintaks CSS di bawah ini:

selector:hover {
    css declarations
}

Misalkan kita memiliki sebuah element button

<button>Hover Me!</button>

Maka untuk memberikan efek hover pada element button di atas, sintaks CSS dapat ditulis seperti berikut:

button:hover {
    background: red;
    color: white;
}

Jika kita perhatikan contoh di atas, mungkin sejauh ini kita hanya mengetahui efek hover hanya berlaku untuk element yang di-hover saja. Namun ternyata efek hover juga digunakan untuk mempengaruhi element lain selain dari element yang di-hover.

Ada 5 aturan yang mesti kita ingat jika ingin mempengaruhi element lain ketika suatu element di-hover:

Element Berada Tepat Di Bawah Element yang Sedang Dihover

Untuk mempengaruhi element yang berada tepat berada di bawah element yang dihover maka menggunakan tanda plus (+)

<div class="element1">DIV 1</div>
<div class="element2">DIV 2</div>
.element1:hover + .element2{
     color: red;
}
Run Code

Element Berada Di Bawah Element yang Sedang Dihover

Jika pada aturan yang pertama digunakan untuk mempengaruhi element yang berada tepat di bawah element yang sedang dihover, maka untuk aturan yang ke 2 ini digunakan untuk mempengaruhi element yang berada di bawah element yang sedang dihover walaupun di tengah-tengahnya ada beberapa element yang lain. Adapun tanda yang digunakan adalah tanda (~)

<div class="element1">Div A</div>
<div>random other elements</div>
<div>random other elements</div>
<div>random other elements</div>
<div class="element2">Div B</div>
.element1:hover ~ .element2{
     color: red;
}
Run Code

Element Berada Di dalam Element yang Sedang Dihover

Ketika element yang dihover merupakan sebuah parent, maka kita dapat mempengaruhi element yang di dalamnya dengan menggunakan tanda (>)

<div class="parentDiv">
     <div class="element1">Div 1</div>
     <div class="element2">Div 2</div>
     <div class="element3">Div 3</div>
</div>
.parentDiv:hover > .element2 {
     color: red;
}
Run Code

Pada contoh di atas hanya mempengaruhi salah satu element saja. Untuk mempengaruhi beberapa element dapat menggunakan tanda koma (,)

.parentDiv:hover > .element2, .parentDiv:hover >.element3 {
     color: red;
}
Run Code

Untuk mempengaruhi semua element di dalam parent dapat menggunakan tanda astrik (*)

.parentDiv:hover > * {
     color: red;
}
Run Code