[CSS] Link om div heen, div onMouseOver werkt niet

[Kaastosti]

Wat ik wil bereiken is een lijst van divs onder elkaar met daarin IP's. Op het moment dat iemand op zo'n div klikt moet deze zich gedragen als een link en in een ander frame een pagina wijzigen. Dat linken en pagina wijzigen is geen probleem, dat werkt naar behoren.

Het probleem zit 'm in de onMouseOver die op de een of andere manier niet meer mee wil werken. Ik vermoed dat dit komt doordat de link zelf om de div heen zit. Misschien een beetje ranzige constructie, maar op deze manier voorkom ik dat ik veel onMouseOver extra's moet schrijven voor die div (andere muisaanwijzer) met een onClick event er bij.

Het wijzigen van de cursor naar het handje gaat gewoon goed, het klikken en linken ook. Wat ik echter ook nog wil, is dat de border van de div van 1 naar 2 pixels gaat en dat werkt niet.

HTML:

<a href='pagina.php' target='left'><div id='ip_status'>192.168.2.10</div></a>

Nu dacht ik eerst 'mwah, als a:hover kan, dan moet div:hover ook kunnen'... helaas, te makkelijk gedacht een onMouseOver='alert(\'woei\')' in de div gooien werkt ook niet.

Ik vermoed dat de <a> </a> om de div heen er voor zorgt dat de onMouseOver event nooit bij de div 'aankomt'. De link er binnen zetten kan wel, maar ik wil nu juist dat de hele div een link is, en niet alleen de tekst die er in staat. Wat is een nette manier om dit te doen, zonder een halve pagina aan javascript functies te schrijven?

[ Voor 7% gewijzigd door Kaastosti op 29-03-2005 15:27 ]

[Willem]

Toch wel met JavaScript werken (getElementById).
Of een a element zo stijlen.

[Kaastosti]

Een getElementById gaat lastig, aangezien ik de id al gebruik om aan te geven welke style gebruikt moet worden. Dan zou ik dus nog een extra gegeven toe moeten voegen aan dat id, waardoor m'n stylesheet enorm zou worden (als ik al die variaties er in op zou nemen).

Wat bedoel je met een a element zo stijlen?

[Verwijderd]

Een soortgelijk topic was er een weekje geleden:
[rml][ html] <a href> om de <li> ipv erin.[/rml]
Misschien dat daar nog iets instaat?

[Kaastosti]

Daar staat inderdaad nog iets in... die display: block deed het truukje Althans, zo lijkt het nu, tijd om verder te puzzelen. Ik had gezocht naar 'div' en 'a' .. maar het kan natuurlijk ook met andere elementen

[Sappie]

Nu dacht ik eerst 'mwah, als a:hover kan, dan moet div:hover ook kunnen'

Deze css pseudo-klasse werkt ook in alle fatsoenlijke browsers. Internet Explorer gooit natuurlijk weer roet in het eten.

Echter zijn er genoeg oplossingen voor. Een imo mooie 'workaround' van Clay voor dit staat op:

http://www.xs4all.nl/~peterned/csshover.html