Beim "Hovern" eines Produktbildes Text anzeigen

**Ale** · 07.07.2011, 20:13

Hallo. Ich weiß nicht ob das jemand schon einmal mit Isotope umgesetzt hat, aber gesehen habt ihr es schon bestimmt. Hier ein Beispiel: http://wpshower.com/demo/?theme=imbalance

Wie würdet ihr die Sache angehen (oder könnt es aus eurer Erfahrung sagen)?
Benötige ich dazu ein jquery bzw. mootools-Plugin?

Alexander

**psren** · 07.07.2011, 20:34

Theoretisch geht das nur mit CSS.

du hast 2 Elemente (jetzt kommt Beispielcode)

HTML-Code:

<div class="to-hover">
   <div class="deinProduktbild...">......</div>
   <div class="showIfHovered">......</div>
</div>

CSS

Code:

.to-hover {
   position: relative;
}

.to-hover .showIfHovered {
   display: none;
   position: absolute;
   top:0;
   left: 0;
}

.to-hover:hover .showIfHovered {
   display: block;
}

Beim Hovern des Elternelements wird das eingeblented. Jedoch funktioniert bei alten ie die Pseudo :hover nur für <a>-Elemente. Das könnte man wenn man auf den ie6 achten muss mit Javascript nachrüsten.

Zu dem Code oben: Das bekommt man noch besser hin von Semantik, Barrierefreiheit etc, war jetzt nur mal ein Beispiel zum Verständnis.