

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

[code]

    <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');
        });
    
[/code]


CC BY-SA 4.0
2021-01-21T06:35:31.827
73462
2021-01-22T00:19:20.303
2021-01-22T00:19:20.303
3060
43610
question
javascript html jquery
jQuery でマウスホバー時に border を出したい


ここで利用しているthisはテキストではなくて  
[thisキーワード](https://developer.mozilla.org/ja/docs/Web/JavaScript/Reference/Operators/this)になります。  
そのためダブルクォーテーションでくくってはだめです。

[code]

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

[code]

    <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>
[/code]


CC BY-SA 4.0
2021-01-21T07:24:05.840
73464
2021-01-21T07:24:05.840
22665
73462
answer