CSS Verständnisfrage

Hallo,

ich brüte im Moment an einem Problem und kommen nicht weiter.

Ich habe einen DIV mit Produkbildern angelegt den ich von links nach rechts einsliden lassen möchte, dieser DIV hat eine breite von 950px. Da der normal nicht zu sehen sein soll habe ich jetzt das Problem wie kann ich diesen DIV per hover sichtbar bekommen. Ich habe das mit einem zweite Div versucht zu lösen, klappt aber nicht weil sich das nicht hovern lässt.

Meine Versuch:

<div class="produkt-wrapper">
<div class="test"></div>
<div class="produkte"></div>
</div>

Die Klasse "produkt-wrapper" ist position:relativ
Die Klasse "produkte" ist position:absolut left: -950px
Die Klasse "test" ist position:absolut 0px width: 200px - das ist mein Button für den hover, aber genau dieser regiert auf keinen hover. Jedenfalls wird "produkte nicht sichbar.

Die CSS Anweisung lautet: .test:hover .produkte left: 200px

Der Div "test" soll oben liegen und der DIV "produkte" soll darunter raussliden"

Habe ich hier einen Gedankefehler oder kann ich das evtl. anders und eleganter lösen?

versuch mal

Code:

---

.test:hover~.produkte

---

http://codepen.io/anon/pen/plgCr

Hallo,

nein das geht leider nicht. Kann es daran liegen das der DIV für den hover außerhalb des produkt divs liegt?

so ??
http://codepen.io/anon/pen/plgCr

Hallo,

sorry den Link hatte ich ignoriert. Ja das ist fast ok. Nur der blau bereich soll fest 200px haben. Wenn ich das jetzt auf 200px setze dann ist auch der ausgeslidete Bereich nur 200px.

kannst du ja jederzeit anpassen:
http://codepen.io/anon/pen/plgCr