CSS fout

[Guillome]

HTML:

<style>
  a.test div.infotest { display:none; }
  a.test:hover div.infotest { display:block; }
</style>
<a class='test' href="javascript:;">
  <div class='infotest'>
    Dit moet onzichtbaar zijn
    <div>
      <a href='javascript:;'>Deze knop ook</a>
    </div>
  </div>
  Zichtbaar
</a>
<br /><br />
<a class='test' href="javascript:;">
  <div class='infotest'>Dit klopt</div>
  Zichtbaar
</a>

http://www.guillome.nl/dump/test.html
Ik kom er niet uit, waarom laat ie bij de eerste de inhoud wel zien? Ligt aan die diepste <a> tag. Als die er uit is werkt het wel, maar dat moet niet. Help

[Verwijderd]

een <div> binnen een anchor <a> tag kan volgens mij niet. Firefox rendert het voor zichzelf ook als volgt:

code:

<a class="test" href="javascript:;">
  </a><div class="infotest">
<a class="test" href="javascript:;">    Dit moet onzichtbaar zijn
    </a><div>
<a class="test" href="javascript:;">      </a><a href="javascript:;">Deze knop ook</a>
    </div>
  </div>

  Zichtbaar

<br><br>
<a class="test" href="javascript:;">
  <div class="infotest">Dit klopt</div>
  Zichtbaar
</a>

[Verwijderd]

Vrij simpel: een div element mag niet binnen een a element voorkomen. De parser van de browser herstelt dat door het a element "af te sluiten" voor het div element.

Als je de dom inspector of firebug gebruikt kun je dat ongetwijfeld goed zien.

[supperbas]

je zou misschien eventueel nog onclick kunnen gebruiken

dus
<div class="infotest" onclick="javascript:;"></div>

en mocht je het mouse over effect willen kan je eventueel
.infotest:hover { cursor:pointer; }
gerbuiken

[Guillome]

Verhips dat is ook zo, stom! Dank je voor jullie uitleg
Dan idd helaas maar met javascript

JavaScript:

onmouseover='this.firstChild.style.display = "block";' onmouseout='this.firstChild.style.display = "none";' 

[_Thanatos_]

Vier gratis tips
[list=1]
• Waarom niet gewoon een <span> met display:block in een <a> als je daar zonodig een extra element in wil hebben?
• Waarom werk je niet met <button>? Dat lijkt meer bedoeld voor wat je probeert te maken.
• Als het gaat om :hover, dat werkt ook op een div, button, span, etc. Op alles eigenlijk. Niet in IE6, maar who cares?
• Haal die achterlijke events en javascript-urls uit je html weg. Die horen in een script file/block.

[ Voor 7% gewijzigd door _Thanatos_ op 24-08-2009 05:01 ]

[Guillome]

1: dit is uiteraard een uitgeklede versie Nut van sommige dingen lijken hier misschien niet in duidelijk. Div is nodig hier En wat is het verschil met een div of een span display:block
2: ik heb een grafische button
3. I care En in IE 7 werkt dat ook niet. Dat was de oplossing geweest idd als het zou werken
4. relaxe man in de button roep ik daar de functie aan. Voor de andere: zie punt 1

[harrald]

Guillome schreef op maandag 24 augustus 2009 @ 08:50:
1: dit is uiteraard een uitgeklede versie Nut van sommige dingen lijken hier misschien niet in duidelijk. Div is nodig hier En wat is het verschil met een div of een span display:block
2: ik heb een grafische button
3. I care En in IE 7 werkt dat ook niet. Dat was de oplossing geweest idd als het zou werken
4. relaxe man in de button roep ik daar de functie aan. Voor de andere: zie punt 1

Het verschil met een span met display:block en een div, is dat div een block element is daarmee niet in een inline element geplaatst mag worden.

[R4gnax]

harrald schreef op maandag 24 augustus 2009 @ 09:04:
[...]

Het verschil met een span met display:block en een div, is dat div een block element is daarmee niet in een inline element geplaatst mag worden.

Een element met display: block mag eigenlijk ook niet in een inline element of een element met display: inline hoor, alleen slikken alle browsers die foute opzet (op het moment) toevallig wel.

Wat je eigenlijk behoort te doen is het inline element representeren als een inline-block.