jQuery でマウスホバー時に border を出したい


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]




ここで利用している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]

