ホバー時のアンダーラインを実装したい

Question

ナビゲーションメニューで、ホバーしたらアンダーラインをふわっと表示させ、クリックするとアンダーライン表示を固定する方法を知りたいです。

以下のコードだと、クリックした後にカーソルを離すとアンダーラインが消えてしまいます。

<ul>
<li><a href="#">HOME</a></li>
<li><a href="#">ABOUT</a></li>
<li><a href="#">ADDRESS</a></li>
<li><a href="#">CONTACT</a></li>
</ul>

$('ul li a').click(function(){
  $('ul li a').removeClass('underline');
  $(this).addClass('underline');
});

ul li a {
  position: relative;
}

ul li a.underline:after {
  position: absolute;
  content: '';
  width: 100%;
  height: 1px;
  background-color: #000000;
  left: 0;
  bottom: -1px;
}

ul li a:after {
  position: absolute;
  content: '';
  width: 100%;
  height: 1px;
  background-color: #000000;
  left: 0;
  bottom: -1px;
  transition: 0.5s;
  opacity: 0;
}

ul li a:hover:after {
  opacity: 1;
}

Answer 1

ul li a.underline:after {
  opacity: 1; /* これを追加してみてください */
  position: absolute;
  content: '';
  width: 100%;
  height: 1px;
  background-color: #000000;
  left: 0;
  bottom: -1px;
}

Comments

[yukarichang]

できました！ありがとうございましたm(_ _)m