Einfacher Bilderwechsel über CSS

**oliver_z** · 24.10.2016, 15:27

Hallo zusammen,

ich wollte, nach Studieren einer Lösung dafür, die ich im Netz gefunden habe, einen einfachen Bilderwechsel bei mouseover über CSS regeln.
Dafür habe ich eine id Wechsel folgendermaßen definiert:

Code:

#wechsel {
    a {
        background: url(Bild2) no-repeat;
        display:block; width:960px; /* Linkbereich begrenzen */
      }
      img {
        display:block; width:960px; height:635px; border:0;
      }
      a:hover img {
        visibility: hidden;
      }
      a:hover { /* Workaround fuer IE 5.5 und 6 */
        border:0;
      }
}

Das Bild, das als erstes zu sehen ist und dann gegen das zweite getauscht werden soll ist so verpackt:

Code:

<p id="wechsel">
   <a href="#wechsel">
<img class="protected" style="display: block; margin-left: auto; margin-right: auto;" src="Bild1" alt="" width="960" height="635">
</a>
</p>

Aber irgendwie haut das nicht hin. Schaue ich mir das Ganze in Firebug an ist dort nur

Code:

#wechsel {
}

zu lesen. D.h. alle meine Definitionen gehen verloren. Was mache ich falsch?

**Spooky** · 24.10.2016, 15:37

Du hast SCSS Syntax verwendet. Lässt du das auch kompilieren?

**oliver_z** · 24.10.2016, 15:43

Äh, also ich habe die CSS-Definitionen nun mal angepasst:

Code:

body {
    background-color:rgba(0,0,0,1);
}

#wechsel a {
    background: url(Bild2) no-repeat;
}

#wechsel img {
    display:block; width:960px; height:635px; border:0;
}

#wechsel a:hover img {
    visibility: hidden;
}

#wechsel a:hover {
    border:0;
}

Nun funktioniert es, allerdings wird das Bild nicht angezeigt, was beim mouseover erscheinen soll. Der Link ist korrekt, das habe ich schon getestet...
Was ist SCSS?

**Spooky** · 24.10.2016, 15:47

Zitat von oliver_z

Nun funktioniert es, allerdings wird das Bild nicht angezeigt, was beim mouseover erscheinen soll. Der Link ist korrekt, das habe ich schon getestet...

Poste einen Link zur Seite wo man das Problem sieht.

Zitat von oliver_z

Was ist SCSS?

Das, was du hier gepostet hast:

Zitat von oliver_z

Code:

#wechsel {
	a {
		background: url(Bild2) no-repeat;
		display:block; width:960px; /* Linkbereich begrenzen */
	}
	img {
		display:block; width:960px; height:635px; border:0;
	}
	a:hover img {
		visibility: hidden;
	}
	a:hover { /* Workaround fuer IE 5.5 und 6 */
		border:0;
	}
}

ist SCSS Syntax.

**oliver_z** · 24.10.2016, 15:53

Das Bild quasi unsichtbar zu machen über visibility funktioniert, aber das Hintergrundbild was dann stattdessen zu sehen sein soll erscheint nicht. Eventuell könnte es daran liegen, dass ich für body als Hintergrundfarbe schwarz festgelegt habe?

**Spooky** · 24.10.2016, 15:56

Hintergrundbilder funktionieren nur bei Block Elementen. Dir fehlt ein

Code:

#wechsel a {
    display:block;
}

**oliver_z** · 24.10.2016, 15:59

Jetzt funktioniert es. Vielen Dank!

**oliver_z** · 24.10.2016, 21:44

Um das ganze responsive zu machen habe ich nun zwei Änderungen / Ergänzungen vorgenommen:

Code:

#wechsel a {
    background: url(Bild2) no-repeat; background-size: 100% 100%;
}

#wechsel img {
    display:block;max-width:100%; height:auto; border:0;
}

Nur für die, die das vielleicht auch mal brauchen können. Finde das Ganze eigentlich ganz sinnvoll, weil man nicht direkt mit JS um die Ecke kommen muss.