【js】jQueryのhover()の書き方

jQueryの.hover()なんだけどホバーした時としていない時の条件分岐が見たことない形だったので備忘録

.hover()の書き方

<div class="btn">これはボタン</div>
<script>
jQuery(function($){
  $('.btn').hover(function() {
    //hoverしたときの記述を書きます
    $(this).css('background', 'red');
  }, function() {
    //hoverしていない時の記述を書きます
    $(this).css('background', 'blue');
  });
});
</script>

こういう}, function() {って繋げるの知らなくて、なんだこれは？ってなったので備忘録がてら残している

.hover()の使いどころ

使いどころとしては、「とある要素」をホバーしたらドロップダウンメニューみたいのを出したいときに「とある要素」と「ドロップダウンメニュー」の間を開けたいときにcssだとその隙間があるとhoverが外れてすぐに閉じたりするのでホバー外れても一定の時間はドロップダウンメニュー出しておきたいって時に使ったりした僕の場合
↓サンプル

長くなるの嫌なので別ページでソースコード置いておく