'onhover' keeps flashing image on and off


#1

Below is the cut down version of my html code of my page, as the full code could not be added here (more than 100 chars)
what i am having problems with is the images in the second table down () keep flashing on and off when the mouse is moving over them, this does not do this in other sites i have seen this done in.
please can anyone see what i may have missed out or what is in the code that should not be there that may be causing it to flash.

thanks in advance for your help.

<html>
<head>
<style type="text/css" media="all">
.rollover a:hover img {
  visibility: hidden;
}
* html a:hover {
  visibility: visible;
}
.bl { background-image: url(/images/beaver_age.png); }
.cl { background-image: url(/images/cub_age.png); }
.sl { background-image: url(/images/scout_age.png); }
.el { background-image: url(/images/explorer_age.png); }
.nl { background-image: url(/images/network_age.png); }
/* RAR Rollover end */
</style>
</head><body>
<table width="963" height="419" border="1" cellpadding="0" cellspacing="0" bordercolor="#111111" id="AutoNumber1" style="border-collapse: collapse; border-width: 0">
  <tr>
    <td width="100%" bgcolor="#879EC7" style="border-style: none; border-width: medium" height="17">&nbsp; 
    </td>
  </tr>
  <tr>
    <td width="100%" style="border-left: medium none #111111; border-right: medium none #111111; border-top-style: none; border-top-width: medium; border-bottom-style: none; border-bottom-width: medium" height="16" bgcolor="#FFCC66">
<table width="100%" align="center" class="rollover">
        <tbody>
          <tr>
            <td width="132">&nbsp;</td>
            <td width="128">
              <div class="bl">
                <div align="center"><a href="/beavers/index.php"><img src="images/beaver_logo.png" alt="Beavers (6-8yo)" /></a></div>
              </div></td>
            <td width="65">&nbsp;</td>
            <td width="132"> <div class="cl">
                <div align="center"><a href="/cubs/index.php"><img src="images/cub_logo.png" alt="Cubs (8-10.5yo)" /></a></div>
              </div></td>
            <td width="65">&nbsp;</td>
            <td width="132"> <div class="sl">
                <div align="center"><a href="/scouts/index.php"><img src="images/scout_logo.png" alt="Scouts (10.5-14yo)" /></a></div>
              </div></td>
            <td width="65">&nbsp;</td>
            <td width="132"> <div class="el">
                <div align="center"><a href="/explorer/index.php"><img src="images/explorer_logo.png" alt="Explorers (14-18yo)" /></a></div>
              </div></td>
            <td width="65">&nbsp;</td>
            <td width="132"> <div class="nl">
                <div align="center"><a href="/network/index.php"><img src="images/network_logo.png" alt="Network (18-25yo)" /></a></div>
              </div></td>
            <td width="132">&nbsp;</td>
          </tr>
        </tbody>
      </table>
    </td>
  </tr>
  <tr>
    <td width="100%" style="border-left: medium none #111111; border-right: medium none #111111; border-top-style: none; border-top-width: medium; border-bottom-style: none; border-bottom-width: medium" height="16" bgcolor="#FFCC66">&nbsp; 
    </td>
  </tr>
  </table>
</body>
</html>

#2

Hmmz, that’s a lotta code and I didn’t feel like munching through it all, but here’s what I think is happening:

  1. You move your mouse over the image, the hover activates, and the image’s visibility turns to ‘hidden’. So, the images is not there anymore :)
  2. The moment you move your mouse again, the hover does not apply anymore and the image’s visibility turns back to ‘visible’.
  3. If your mouse is still over the area where the image is, go to 1.

If you leave your mouse untouched, the image should stop flickering, and when you start moving it again, it should flicker. Am I right?