[CSS/JS]Onmouseover icm. visibility: hidden veror. knipperen

[MJV]

Voor een site ben ik bezig een soort memory-veld te produceren. Er is een tabel, met daarin cellen met als achtergrond een afbeelding.
In elke cell staat vervolgens een div. Het is de bedoeling dat deze div bij een mouse-over verdwijnt, zodat de afbeelding zichtbaar wordt.

Dit heb ik op de volgende manier voor elkaar gekregen:

Cascading Stylesheet:

div.verborgen {
    width: 120px;
    height: 120px;
    visibility: hidden;
}

div.zichtbaar {
    width: 120px;
    height: 120px;
    background-color: white;
    color: black;
}

De div ziet er vervolgens zo uit:

HTML:

<div class="zichtbaar" onmouseover="this.className='verborgen'" onmouseout="this.className='zichtbaar'">

Dit werkt, maar alleen als de muis niet bewogen wordt.

Probleem
Door dat div.verborgen een visibility:hidden heeft, onstaat bij elke muisbeweging een nieuwe onmouseout en weer een onmousehover. Dit komt alleen voor bij de visibility: hidden van de class verborgen. De class verborgen bijv. background-color: yellow; meegeven werkt zonder problemen.
Ter illustratie: http://www.altijdlente.net/css.html
Display: none; veroorzaakt trouwens een totaal knipperende div, ook zonder muisbewegingen.

Wat ik dus wil, is dat niet bij elke muisbeweging de div knippert.
De tekst moet verdwijnen en de afbeelding moet zichtbaar worden. Eventueel kunnen de afbeeldingen nog vanuit de achtergrond van de td naar een gewone div verplaatst worden.

Ik ben al druk met JavaScript in de weer geweest, ook in css pseudoclasses(:hover) lossen het probleem ook niet op.

Met de search kwam ik dit topic tegen: \[HTML/CSS/JS]onMouseOver/Out - image knippert!, maar kan daar ook geen oplossing vinden.
Op internet vond ik het volgende: http://willmaster.com/blog/css/show-hide_floating_div.html
Maar ook dit veroorzaakt knipperen.

[ Voor 5% gewijzigd door MJV op 19-11-2007 01:12 ]

[BradJohnson]

Of de manier waarop jij het wilt doen de beste is betwijfel ik, maar goed. Dit probleem kun je denk ik oplossen door gebruik te maken van "opacity" ipv "visibility". Je object verdwijnt daarmee namelijk niet meer, maar wordt doorzichtig.

[ Voor 17% gewijzigd door BradJohnson op 19-11-2007 06:37 ]

[MJV]

bvraalte schreef op maandag 19 november 2007 @ 06:35:
Of de manier waarop jij het wilt doen de beste is betwijfel ik, maar goed. Dit probleem kun je denk ik oplossen door gebruik te maken van "opacity" ipv "visibility". Je object verdwijnt daarmee namelijk niet meer, maar wordt doorzichtig.

Je hebt gelijk. Het is gelukt.

For the record:
Het kan dus op twee manieren.

• Opacity van verborgen class naar 0.
• De achtergrond van de verborgen div transparant maken, en de tekst tussen <span>-tags gooien.
  En dan vervolgens
  
  Cascading Stylesheet:
  

  div.verborgen span {
      visibility: hidden;
  }

[Verwijderd]

waarom die extra div?

waarom niet gewoon het plaatje laten zien als je over de cel gaat? iets als

Cascading Stylesheet:

td:hover {
  background-image: url('');
}

of

Cascading Stylesheet:

td img {display: none}
td:hover img {display: block}

[MoietyMe]

Verwijderd schreef op maandag 19 november 2007 @ 10:51:
waarom die extra div?

waarom niet gewoon het plaatje laten zien als je over de cel gaat? iets als

Cascading Stylesheet:

td:hover {
  background-image: url('');
}

of

Cascading Stylesheet:

td img {display: none}
td:hover img {display: block}

Daar zat ik ook al aan te denken. Dit kun je met een behaviour ook in IE laten werken

[MJV]

Verwijderd schreef op maandag 19 november 2007 @ 10:51:
waarom die extra div?

waarom niet gewoon het plaatje laten zien als je over de cel gaat? iets als

Cascading Stylesheet:

td:hover {
  background-image: url('');
}

of

Cascading Stylesheet:

td img {display: none}
td:hover img {display: block}

Omdat dan de tekst er voor blijft staan?

[MoietyMe]

DutchBlood schreef op maandag 19 november 2007 @ 11:27:
[...]

Omdat dan de tekst er voor blijft staan?

Dan zet je die tekst in een span en zet je een display:none; op die span als je hovert