hotbizindo

Menjaga Keadaan Hover pada Menu Induk

<div dir="ltr" style="text-align: left;" trbidi="on"> 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: <figure class="separator center"><a href="http://1.bp.blogspot.com/-g5I5rUbMXUs/T5JuyA_v3XI/AAAAAAAACiQ/roNfo638Nvs/s1600/before.png" title="Menu Navigasi Sebelum Diperbaiki"><img alt="Menu Navigasi Sebelum Diperbaiki" src="http://1.bp.blogspot.com/-g5I5rUbMXUs/T5JuyA_v3XI/AAAAAAAACiQ/roNfo638Nvs/s1600/before.png" /></a><figcaption>Efek hover pada menu induk menghilang saat pointer memasuki submenu</figcaption></figure> <div class="button-group"> Sebelum</div>  <iframe allowfullscreen="allowfullscreen" frameborder="0" height="300" src="http://jsfiddle.net/ETBLz/32/embedded/" width="100%"></iframe> Itu terjadi karena pada umumnya kita menargetkan efek hover pada elemen tautan saja seperti ini: <pre id="code-block:1" rel="CSS"><code class="css">nav li a:hover { background-color:blue; }</code></pre> Padahal yang seharusnya kita targetkan adalah elemen list/daftar yang menjadi induk dari submenu, karena submenu berada di dalam elemen <code><a class="allow" href="http://www.google.co.id/cse?cx=partner-pub-4884309229437815:4734643671&ie=UTF-8&q=%26lt%3Bli%26gt%3B&sa=Telusuri" target="_blank" title="Telusuri makna kode ini"><li></a></code>, bukan di dalam elemen <code><a class="allow" href="http://www.google.co.id/cse?cx=partner-pub-4884309229437815:4734643671&ie=UTF-8&q=%26lt%3Ba%26gt%3B&sa=Telusuri" target="_blank" title="Telusuri makna kode ini"><a></a></code>: <figure class="separator center"><a href="http://1.bp.blogspot.com/-hUMSVLsKD6w/T5Jwcfi-XDI/AAAAAAAACig/arSakXojw2o/s1600/inside-li-element.png" title="Submenus"><img alt="List Item" src="http://1.bp.blogspot.com/-hUMSVLsKD6w/T5Jwcfi-XDI/AAAAAAAACig/arSakXojw2o/s1600/inside-li-element.png" /></a><figcaption>Susunan Submenu</figcaption></figure> Sayangnya menargetkan elemen <code><a class="allow" href="http://www.google.co.id/cse?cx=partner-pub-4884309229437815:4734643671&ie=UTF-8&q=%26lt%3Bli%26gt%3B&sa=Telusuri" target="_blank" title="Telusuri makna kode ini"><li></a></code> secara sepihak untuk mempertahankan warna menu induk tidak bisa kita lakukan karena efek hover berada pada elemen <code><a class="allow" href="http://www.google.co.id/cse?cx=partner-pub-4884309229437815:4734643671&ie=UTF-8&q=%26lt%3Ba%26gt%3B&sa=Telusuri" target="_blank" title="Telusuri makna kode ini"><a></a></code>, sehingga saat pointer keluar dari <code><a class="allow" href="http://www.google.co.id/cse?cx=partner-pub-4884309229437815:4734643671&ie=UTF-8&q=%26lt%3Ba%26gt%3B&sa=Telusuri" target="_blank" title="Telusuri makna kode ini"><a></a></code> maka efek hover akan menghilang. Tapi berbeda jika kita menargetkan elemen <code><a class="allow" href="http://www.google.co.id/cse?cx=partner-pub-4884309229437815:4734643671&ie=UTF-8&q=%26lt%3Bli%26gt%3B&sa=Telusuri" target="_blank" title="Telusuri makna kode ini"><li></a></code> kemudian memanfaatkan sikap hover pada elemen tersebut untuk mengeset warna direct children tautan di dalamnya: <pre id="code-block:2" rel="CSS"><code class="css">nav li a:hover, nav li:hover > a { background-color:blue; }</code></pre> 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 <code><a class="allow" href="http://www.google.co.id/cse?cx=partner-pub-4884309229437815:4734643671&ie=UTF-8&q=%26lt%3Bli%26gt%3B&sa=Telusuri" target="_blank" title="Telusuri makna kode ini"><li></a></code> induk: <figure class="separator center"><a href="http://3.bp.blogspot.com/-EQJmE5jSgvg/T5Ju2LTb89I/AAAAAAAACiY/Ukz2E1-2rDo/s1600/after.png" title="Menu Navigasi Sesudah Diperbaiki"><img alt="Menu Navigasi Sesudah Diperbaiki" src="http://3.bp.blogspot.com/-EQJmE5jSgvg/T5Ju2LTb89I/AAAAAAAACiY/Ukz2E1-2rDo/s1600/after.png" /></a><figcaption>Warna hover pada menu induk tetap terjaga</figcaption></figure> <div class="button-group"> Sesudah</div> <iframe allowfullscreen="allowfullscreen" frameborder="0" height="300" src="http://jsfiddle.net/tovic/ETBLz/1/embedded/" width="100%"></iframe> ajb@2013</div>