[CSS] Lastige hover selector

zondag 15 augustus 2010 21:00

Acties:

0 Henk 'm!

Topicstarter

Ik heb deze code:

HTML:

<!doctype html>
<style>
    x, x:hover + y { color: red }
    y, x:hover { color: blue }
</style>
<x>1</x>
<y>2</y>
<x>3</x>

Als ik 1 hover, wordt 1 blauw, wordt 2 rood, en 3 blijft rood.
Als ik 3 hover, blijft 1 rood, blijft 2 blauw, en wordt 3 blauw. Wat ik wil is dat 2 dan ook rood wordt. Is dit mogelijk met puur HTML+CSS?

Het kan wel met een wrapper en de volgende CSS, maar als je whitespace tussen x en y hovert, wordt alles rood.

Cascading Stylesheet:

1 2	wrapper x, wrapper:hover :not(:hover) { color: red } wrapper y, wrapper x:hover { color: blue }

[ Voor 6% gewijzigd door Blaise op 15-08-2010 21:03 ]

zondag 15 augustus 2010 21:08

Acties:

0 Henk 'm!

kaesve

de + operator zorgt er als het goed is voor dat de eerst volgende instance van y rood wordt. het werkt dus niet meer als y voor x staat, met deze selector.

ik denk niet dat dit zomaar gaat met css, omdat je eigenlijk een conditional wilt hebben (als element x in staat xxx is dan geld voor y {dit})
ik geloof dat css zo niet werkt, helaas

Reageer

Onderwerpen