Postingan lainnya
Buku Ini Koding!
Baru!
Buku ini akan jadi teman perjalanan kamu belajar sampai dapat kerjaan di dunia programming!
Kelas Premium!
Belajar bikin website dari nol sekarang
Gunakan kupon "lebihcepat" untuk diskon 25%!
Menonaktifkan hover pada link yang aktif
Bagaimana ya cara menonaktifkan hover pada link yang aktif. Ex: saya sedang pada page Home, ketika saya arahkan pointer ke link Home(Navbar), link Home backgroundnya berubah jadi abu-abu, karena hover yang saya buat membuat background abu-abu. Tapi saya tidak mau link(page) yang sedang aktif tidak bisa di hover. Terimakasih
2 Jawaban:
pakai property css pointer-events : none
<pre> .link-active:hover { pointer-events : none } </pre>
untuk menentukan link tersebut aktif (sedang dikunjungi) itu bisa dilakukan dengan javascript.
disini saya mencontohkan dengan bantuan lib js yakni jQuery, seperti contoh dengan code dibawah.
HTML
<pre> <ul id="nav"> <li id="navhome"><a href="home.aspx">Home</a></li> <li id="navmanage"><a href="manageIS.aspx">Manage</a></li> <li id="navdocso"><a href="docs.aspx">Documents</a></li> <li id="navadmin"><a href="admin.aspx">Admin Panel</a></li> <li id="navpast"><a href="past.aspx">View Past</a></li> </ul> </pre>
CSS <pre> #nav a { color: #000; transition: color .2s; }
#nav a:not(.active):hover, #nav a.active { color: grey; }
#nav a.active { pointer-events: none; } </pre>
JQuery
<pre> $(function(){ var current = location.pathname; $('#nav li a').each(function(){ var $this = $(this); // if the current path is like this link, make it active if($this.attr('href').indexOf(current) !== -1){ $this.addClass('active'); } }) }) </pre>
