Bild gegen Bild tauschen

[kosovafan]

Hallo,

ich benutze folgenden Aufbau auf der Seite:

<header class="main">
  <div class="logo"></div>

  <nav>
    <a href="/" class="btn btn-brand fas fa-home" title="Zum Eingang zurück ...">
      <span class="home">
        Home
      </span>
    </a>

    <a href="/about/" class="btn btn-brand fas fa-info" title="Informationen zur Website ...">
      <span class="about">
        Info
      </span>
    </a>

    <a href="/blog/" class="btn btn-brand fas fa-th" title="Meine Meinungen ...">
      <span class="blog">
        Blog
      </span>
    </a>

    <a href="" class="btn btn-brand fab fa-twitter" title="Folge mir auf Twitter ...">
      <span class="twitter">
        Twitter
      </span>
    </a>

    <a href="" class="btn btn-brand fab fa-github" title="Die Website hat auch eine Geschichte ...">
      <span class="github">
        Github
      </span>
    </a>
  </nav>
</header>

  $( document ).ready(function() {
    $(".main").click(function() {
      $(this).toggleClass("on");
      $("nav").slideToggle();
    });
  });

Das Menü wird versteckt und durch Klick auf den Logo (div.logo) kommt es entsprechend zum Vorschein. Jetzt ist das nicht ersichtlich, weswegen ich das Logo beim :hover und :focus austauschen würde. Ich dachte an eine Font Awesome Hamburger, oder vielleicht ein Bild in gleicher Abmessung nur eben mit Hamburger.

Wie könnte ich das am besten erreichen? Ich hatte das mit Jquery remove and add class probiert aber führte das irgendwie nicht zum Erfolg. Vielleicht habt Ihr hier Tipps.

Danke
Silvio

 

[basti1012]

wie wäre es mit sowas


Link zur Lösung



Ansonsten kann man bei mouseover so die Bilder tauschen
Link zur Lösung


EDIT :
PS mit jquery und adclass geht das so
Link zur Lösung