Position:absolute überlagert Hover-Bereich - lässt sich das vermeiden?

[Quabbe]

Moin,

wie in meinem anderen Thread http://www.html.de/threads/anker-mittig-unten-positionieren-responsive-design.52291/ schon geschildert, zerbreche ich mir gerade den Kopf darüber, wie man Links bei unterschiedlichem Inhalt immer in derselben Höhe am unteren Rand anzeigen kann.

Meine aktuelle Lösung schaut so aus, dass ich ein zweites Div-Gerüst unter den eigentlichen Container gesetzt habe, den ich dann absolut darüber positioniert habe. Das macht semantisch wenig Sinn, da erst Inhalt 1+2 kommt und anschließend Link 1+2, aber was will man machen.

Das blöde dabei ist nur, dass der Hover-Effekt vom Container nicht mehr zum Tragen kommt, wenn man mit der Maus über den Bereich fährt, der das Div-Gerüst beinhaltet. Hier ein Versuch das ganze bildhaft darzustellen:



Kann man den Hover-Effekt irgendwie erzwingen, obwohl ein Nicht-Kind-Element absolut positioniert darüber liegt?


Gruß,
Quabbe

 

[MrMurphy]

Hallo,

ich würde das nicht mit "position: absolute" lösen, sondern mit "display: table, table-row und table-cell". Das Ergebnis könnte dann so aussehen:

http://foreninfo.bplaced.net/seiten_fremdprobleme/2014_05_25_quabbe_01_element_unten_anordnen.html

Kann man den Hover-Effekt irgendwie erzwingen,

Dazu müsstest du den hover-Effekt erst mal näher erläutern. So weiß kein Mensch welchen hover-Effekt du überhaupt erreichen möchtest.

Gruss

MrMurphy

 

[Quabbe]

Wow, erstmal vielen Dank für Deinen Einsatz!

Am besten verdeutlichen lässt sich mein Vorhaben wohl an der eigentlichen Seite. Hier habe ich sie mal kurz hochgeladen: http://vermittelmich.de/

Konkret geht es um die Bereiche mit den Bildern. Der Plan war eigentlich, dass wenn man über den Container mit Bild, Überschrift und Text hovert, die "Mehr erfahren"-Links hervorgehoben werden und das Hintergrundbild (durch background-position) um 25 Pixel nach oben geschoben wird. Da die Anker jetzt keine Kind-Elemente des Bild-Containers mehr sind, fällt dieser Effekt ja schonmal weg. Aber die background-position muss sich doch noch irgendwie ansprechen lassen, wenn man über den unsichtbaren Container-Div der Anker hovert. Mit z-index habe ich auch schon rumgespielt, ohne Erfolg.

 

[Quabbe]

Lassen sich Beiträge hier nicht mehr bearbeiten?

Na, jedenfalls hab ich es jetzt irgendwie durch Einsatz von table-cell hinbekommen und es funktioniert so, wie ich das wollte. Ich musste mich nur erstmal einlesen, was seit CSS3 mit display:table und Co alles möglich ist. Also nochmal danke für Deinen Vorschlag und vor allem für Dein Beispiel!


Gruß,
Quabbe