学習56日目 jQueryにおけるthisの構文について

こんにちはKATUUUNです。
タイトルにある通りthisの構文についてアウトプットします。

やりたいこと

上の画像のようにリンクにカーソルを当てると（hover）するとカーソルを当てた箇所のみborder bottomに白線が引かれる。

html

<div class="footer">
  <ul class="footer-list">
    <li class="footer-list-content"><%= link_to "ホーム", root_path %></li>
    <li class="footer-list-content">
      <% if user_signed_in? %>
        <%= link_to "ログアウト", destroy_user_session_path, method: :delete %>
      <% else %>
        <%= link_to "ログイン", new_user_session_path %>
      <% end %>
    </li>
    <li class="footer-list-content"><a href="#">利用方法</a></li>
    <li class="footer-list-content"><a href="#">お問い合わせ</a></li>
  </ul>
</div>

$(function () {
  $('.footer-list-content').hover(
    function(){
      $(this).css('border-bottom', '1px solid white');
    },
    function(){
      $(this).css('border-bottom','none');
    }
  );
});

hoverメソッドを使い、カーソルが乗っている時の処理と外れた時の処理を記述します。

ここでのthisの役割は実際にhoverした箇所だけ処理が行われることです。
https://i.gyazo.com/2a85e5df513895294c2c23ce7316a48b.mp4
以上です