Hoe zorg je dat een hover effect alleen werkt op zichtbare afbeeldingen, inplaats van het gehele vierkante pixelgebied?

Ik heb een afbeelding, een schuine lijn, die moet van kleur veranderen bij hover.

Maar een schuine lijn wordt gezien als een vierkant vak. En wanneer men zich binnen die kaders bevindt veranderd de lijn van kleur.

Hoe zorg ik ervoor dat het hovereffect alleen plaatsvind wanneer men daadwerkelijk hovert over de lijn, inplaats van het vierkante kader wat je eromheen kan maken?

Weet jij het antwoord?

/2500

Ik denk dat je twee afbeeldingen moet maken van het hele vierkante vak, eentje met een lijn in de ene kleur en eentje met de lijn in een andere kleur, en de rest het zelfde. Daarna met javascript of CSS het hele plaatje omwisselen. Dan lijkt het of alleen de lijn verandert. HTML is niet zo slim om met vector graphics om te gaan. Je moet de boel foppen. Misschien wordt het met HTML-5 allemaal mogelijk, daar heb ik me nog niet in verdiept. In de link wat voorbeeldcode.

Bronnen:
http://www.webmasterworld.com/forum21/6615.htm

Hier vraagt iemand zich iets soortgelijks af: http://stackoverflow.com/questions/2689308/hover-only-on-non-transparent-part-of-image Uit de antwoorden blijkt dat het niet zomaar mogelijk is, het gebruik van een wordt aangeraden. Als het om (rechte) lijnen gaat zou je naar de coordinaten van de hover events kunnen kijken en de afstand tot de lijn kunnen berekenen, als die onder een bepaalde waarde komt (de halve dikte van de lijn bv) laat je het hover effect zien.

Stel zelf een vraag

Ben je op zoek naar het antwoord die ene vraag die je misschien al tijden achtervolgt?

/100