Masalah yang tampak kecil tapi kita harap bisa diperbaiki adalah
mengenai efek hover menu induk pada navigasi bertingkat yang akan
menghilang setelah pointer memasuki submenu:







Menu Navigasi Sebelum Diperbaiki
Efek hover pada menu induk menghilang saat pointer memasuki submenu





Sebelum

 



Itu terjadi karena pada umumnya kita menargetkan efek hover pada elemen tautan saja seperti ini:



nav li a:hover {
background-color:blue;
}



Padahal yang seharusnya kita targetkan adalah elemen list/daftar yang menjadi induk dari submenu, karena submenu berada di dalam elemen <li>, bukan di dalam elemen <a>:















List Item
Susunan Submenu




Sayangnya menargetkan elemen <li> secara sepihak untuk mempertahankan warna menu induk tidak bisa kita lakukan karena efek hover berada pada elemen <a>, sehingga saat pointer keluar dari <a> maka efek hover akan menghilang. Tapi berbeda jika kita menargetkan elemen <li> kemudian memanfaatkan sikap hover pada elemen tersebut untuk mengeset warna direct children tautan di dalamnya:



nav li a:hover,
nav li:hover > a {
background-color:blue;
}



Dengan cara di atas maka warna pada menu induk akan tetap terjaga
meskipun pointer sudah meninggalkannya. Karena meskipun sudah keluar,
tapi pada dasarnya pointer masih berada di dalam elemen <li> induk:















Menu Navigasi Sesudah Diperbaiki
Warna hover pada menu induk tetap terjaga





Sesudah









ajb@2013

0 komentar:

Posting Komentar

silahkan komentar

Luncurkan toko Anda hanya dalam 4 detik dengan 
 
Top