Kanten eckig machen mit CSS

[Rolf b]

Hallo Christian,

vielleicht bin ich ja begriffsstutzig, aber kann das funktionieren? Du hast die "Eintrittsbereiche", die den Mouseover-Effekt auslösen. Und den Innenbereich, dem Du keinen Mouseover-Effekt zuweisen KANNST, weil du ja im Innenbereich die Richtung nicht weißt aus der Du kommst. D.h. in der Mitte kannst Du nicht animieren, sondern nur den Endzustand des Hovereffekts auslösen.

Darüber hinaus willst Du durch Betreten eines Randbereichs (also ein Kind des eigentlichen DIV?) eine Animation auslösen die das ganze DIV erfasst. Klingt nach Bedarf für einen Parent-Selector, den es in CSS aber nicht gibt.

Wenn du das gelöst hast, noch diese Überlegung: Wenn jemand langsam und in der Mitte einer Box-Kante die Maus in die Box hineinschiebt, dürfte dein Plan aufgehen. Aber was ist, wenn jemand in der Nähe der Ecke in die Box hineinkommt und dabei die Grenze zwischen - beispielsweise - rot und blau überschreitet? Dann beginnt die Animation von links und schaltet abrupt auf "von oben" um. Oder was ist, wenn man "zu schnell" mit der Maus in den weißen Bereich fährt? Dann beginnt die Animation und endet abrupt im Endzustand.

Vielleicht muss man vier normal rechteckige DIVs machen, die alle auf gleichem Z-Index übereinanderliegen und von denen jedes nur um 1-2 Pixel aus dem Stapel herausschaut. Eins oben, eins links, eins rechts und eins unten. Im :hover setzt du den z-index hoch, damit es auf jeden Fall den Mausfokus behält wenn Du weiter nach innen gehst, und machst dann in diesem DIV die Animation.

Rolf