ハンバーガーメニューにてhover時に思った形にしたい

Question

前提・実現したいこと

現在、ハンバーガーメニューの標準状態は三つの線「≡」を指定しています。そこにhover時に「→」という形にしたい。JQueryを使用してクリックした際に「→」を「←」にしたい。

発生している問題・エラーメッセージ

何度か試行錯誤してみたのですが、うまく実装できないです。

該当のソースコード

=== html ===
<!-- hamburger -->
    <div id="hamburger" class="hamburger">
      <span class="hamburger__bar"></span>
      <span class="hamburger__bar"></span>
      <span class="hamburger__bar"></span>
    </div>
    <!-- hamburger -->
=== /html ===

=== Sass ===
.hamburger {
  width: 40px;
  height: 40px;
  position: fixed;
  top: 24px;
  left: 32px;
  cursor: pointer;
  z-index: 998;
  transition: 0.3s;

  &__bar {
    display: block;
    width: 20px;
    height: 1px;
    background-color: #333;
    position: absolute;
    transition: 0.3s;

    &:nth-child(1) {
      top: 10px;
    }
    &:nth-child(2) {
      top: 20px;
    }
    &:nth-child(3) {
      top: 30px;
    }
  }
}
=== /Sass ===

=== css ===
.hamburger {
  width: 40px;
  height: 40px;
  position: fixed;
  top: 24px;
  left: 32px;
  cursor: pointer;
  z-index: 998;
  -webkit-transition: 0.3s;
  transition: 0.3s;
}
.hamburger__bar {
  display: block;
  width: 20px;
  height: 1px;
  background-color: #333;
  position: absolute;
  -webkit-transition: 0.3s;
  transition: 0.3s;
}
.hamburger__bar:nth-child(1) {
  top: 10px;
}
.hamburger__bar:nth-child(2) {
  top: 20px;
}
.hamburger__bar:nth-child(3) {
  top: 30px;
}
=== /css ===

=== JQuery ===
まだ、記載無し。
=== /JQuery ===

試したこと

親要素にhoverさせた時に形を変えようと指定してみたが、うまくできなった。

補足情報（FW/ツールのバージョンなど）

vs codeの拡張機能Dartsassを使用。

Answer 1

下記のCSSを追加します。CSSのみで矢印を設定してます。
矢印のサイズなどは適当ですので、お好みで調整してください。

jQuery はクリック時にクラスを追加するのみです。

.hamburger:hover .hamburger__bar:nth-child(1) {
  transform: rotate(45deg);
  width: 10px;
  left: 10px;
  top: 16px;
}
.hamburger:hover .hamburger__bar:nth-child(3) {
  transform: rotate(-45deg); 
  width: 10px;
  left: 10px;
  top: 24px
}

.hamburger.active .hamburger__bar:nth-child(1) {
  transform: rotate(-45deg);
  width: 10px;
  left: 0;
  top: 16px;
}
.hamburger.active .hamburger__bar:nth-child(3) {
  transform: rotate(45deg); 
  width: 10px;
  left: 0;
  top: 24px
}

$(function () {
  $('.hamburger').click(function () {
    $(this).addClass('active');
  })
});

CodePenサンプル

Comments

[nao__funky]

お忙しい中、丁寧にご回答有難うございます。
うまく実装できました。数日悩んでいたので、解決できて嬉しいです。
この後、クリックしたら横からメニューが出てくることを指定し、引き続き創作をしたいと思います。

追記
改めて自分の実問を見ると、情報も少なく自分の検討も少なく、他人に投げたような感じに見えました。次回からはもっと情報や検討内容を明記した質問を心掛けたいと思います。
今回も有難うございました。