Postingan lainnya
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>
