Bildergallerie - mehrere Hover-Buttons mit CSS

Hallo,

ich habe eine Bildergallerie und ich möchte dem Benutzer die Möglichkeit geben zu jedem Bild eine aktion mit Hilfe von Buttons auszuführen, die direkt über dem Bild eingeblendet werden, wenn man mit der Maus drüber fährt.

Es sind fünf Buttons und alle müssen angezeigt werden, sobald sich der Mauszeiger über irgendeinem Bereich im Bild befindet. Wie bekommt man das komplett mit CSS hin (ohne JavaScript)?

— Weitere Details —

Ich kann ein DIV-Element über dem Bild legen und für :hover ein anderes Hintergrundbild einblenden, das alle fünf Buttons enthält. Das Problem hier ist, dass wenn ich über dem DIV-Element mit den Button-Bildern noch weitere DIVs für jeden einzelnen Button-Bereich lege (damit man die Buttons separat anklicken kann), geht das DIV-Element dadrunter zur Normalansicht zurück (ohne Buttons), sobald ich eines der Buttons mit der Maus überfahre.

Es sind fünf Buttons und alle müssen angezeigt werden, sobald
sich der Mauszeiger über irgendeinem Bereich im Bild befindet.
Wie bekommt man das komplett mit CSS hin (ohne JavaScript)?

Ohne Javascript: GARNICHT!

Les dir einfach das mal durch was DOM ist. Beachte die Methoden zum Manipulieren von Attributen.
Besonders soltest du dir die Werte zu style.display anschauen.

Hallo Cybertom!

Es sind fünf Buttons und alle müssen angezeigt werden, sobald
sich der Mauszeiger über irgendeinem Bereich im Bild befindet.
Wie bekommt man das komplett mit CSS hin (ohne JavaScript)?

Ohne Javascript: GARNICHT!

Da wäre ich mir nicht so sicher!

http://www.dynamicdrive.com/style/csslibrary/item/cs…

Gruß Gernot

1 Like