KrishnaVandanu

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>

Menjaga Keadaan Hover pada Menu Induk

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:Efek hover pada menu indu…

24 Oct 2013