CSS: Pseudoklasse :hover auch auf :nth-of-type anwendbar?

[Yadgar]

Hi(gh)!

Ich würde gerne auf der oben genannten Seite die beiden Fotos durch per GIMP "c64-isierte" Versionen (also 160 x 200 rechteckige Pixel, maximal 16 Farben) ersetzen, sobald der Benutzer mit der Maus über sie fährt... das müsste ja so ähnlich laufen wie die beiden Link-Elemente auf der Startseite meiner Webpräsenz (http://www.khyberspace.de), also mit der Pseudoklasse :hover.

Da natürlich bei den beiden Fotos jeweils unterschiedliche Alternativ-Bilder angezeigt werden sollte, erschien mir die Pseudoklasse :nth-of-type passend... also so etwas wie

a:nth-of-type(11) background-image:url(retrocomputing_20161101a_small.jpg)
a:nth-of-type(11):hover background-image:url(retrocomputing_20161101a_c64_multicolor_small.png)

Die ersten zehn Links der Seite (Navigationsleiste) werden mit PHP generiert, der Link um das erste Foto ist also das 11. <a>-Element. Trotzdem ändert sich das Bild nicht, wenn ich mit der Maus drüber fahre... kommentiere ich das <img> aus und wähle stattdessen div:nth-of-type(2):nth-child(6):nth-child(1) (das erste <a> im fünften <p> im zweiten <div>) sehe ich nur einen leeren Absatz! Was mache ich falsch?

Bis bald im Khyberspace!

Yadgar

[Yadgar]

Konnte das Problem inzwischen lösen... siehe auch http://ppfeufer.de/css-bildwechsel-bei-mouseover/

[marctrix]

Hej Yadgar,

Konnte das Problem inzwischen lösen

Nein, denn Deine Seite enthält gar kein Bild. Bilder von inhaltlicher Relevanz gehören ins HTML (und nicht ins CSS) - ob das zweite Bild zum Verständnis nötig ist, kann man diskutieren. Ich würde zu einem ja tendieren und es ebenfalls ins HTML setzen.

Beide Bilder sind sinnvoll zu bechriften, so dass auch Menschen ohne CSS verstehen, was das soll.

Die einfachste Methode mal das eine, mal das andere Bild anzeigenzu lassen, wäre IMHO das umbrechen mittels whitespace: nowrap; zu verbieten.

Beim Überfahren mit der Maus oder antabben (Tastatur-Nutzer nciht ausschließen!) macht das erste Bild dem zweiten dann Platz:

<a href="#">
  <img src="bild1.jpg" width="800" height="600" class="defaultPic" alt="Erstes Bild">
  <img src="bild2.jpg" width="800" height="600" class="altPic" alt="Zweites Bild">
</a>
<!-- Hier wäre Platz für eine prima Beschriftung -->

a {
  display: block;
  width: 40vw;
  height: 30vw; /* Nur nötig, wenn animiert werden soll/darf, Breite und Höhe müssen dem Bildformat entsprechen (hier 4:3) */
  white-space-nowrap; /* Damit die Bilder nebeneinander bleiben */
}
a img {
  transition: width 0.9s ease-in-out; /* Falls es animiert sein soll/darf */
}
a img.defaultPic {
  width: 100%; /* füllt das Elternelement komplett aus */
}
a img.altPic {
  width: 0%; /* Ist zunächst nicht sichtbar */
}
a:focus img.defaultPic,
a:hover img.defaultPic {
  width: 0%; /* Wird beim hovern/antabben unsichtbar */
}
a:focus img.altPic,
a:hover img.altPic {
  width: 100%; /* Füllt beim hovern/antabben das Elternelement aus */
}

Das Beispiel als Codepen: "Bilderwechsel"

Ein Problem bleibt: wie soll der Nutzer wissen, dass etwas passiert beim Überfahren mit der Maus? Hinweis geben! Entweder im Text oder grafisch, am besten natürlich beides und für alle erreichbar!

Marc

PS: Natürlich lassen sich auch andere Eigenschaften (opacity, height usw) animieren - es muss kein Einschieben von rechts sein...

PPS: Wenn jemand das Beispiel im Wiki verwenden möchte: gerne!