0

hoverしたときにspanタグにborderを出したいのですが上手くいきません。
どうすればうまくいきますか?

<ul class="nav">
  <li class="nav-item"><a class="navbar-link" href="/xxx.html"><span class="linear">xxx</span></a></li>
  <li class="nav-item"><a class="navbar-link" href="/xxx.html"><span class="linear">xxx</span></a></li>
</ul>



$(".nav-item").hover(function(){
      $("this").find('span').css('border-bottom', ' 1px solid #fff');
    }, function() {
      $("this").find('span').css('border-bottom', ' 1px solid #ccc');
    });

1 件の回答 1

0

ここで利用しているthisはテキストではなくて
thisキーワードになります。
そのためダブルクォーテーションでくくってはだめです。

$(".nav-item").hover(function(){
      $(this).find('span').css('border-bottom', ' 1px solid #fff');
    }, function() {
      $(this).find('span').css('border-bottom', ' 1px solid #ccc');
});
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<ul class="nav">
  <li class="nav-item"><a class="navbar-link" href="/xxx.html"><span class="linear">xxx</span></a></li>
  <li class="nav-item"><a class="navbar-link" href="/xxx.html"><span class="linear">xxx</span></a></li>
</ul>

この質問に回答するには、ログインする必要があります。

求めていた回答ではありませんか? のタグが付いた他の質問を参照する。