# Bild gegen Bild tauschen



## kosovafan (23. April 2018)

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 (24. April 2018)

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


----------

