CSS Image Hovering?

MagSafe · 17 Feb 2006 at 15:41

Hi folks,

I've been trying to create a little hovering effect with CSS but I can't seem to figure out how to make it work, and when I try to search for guides / tutorials on the subject it only brings up image mapping techniques.

Basically all i'm trying to achieve is if you hover over one of the images, the cell bellow it with the villas name inside it changes its background colour.

I've tried manipulating the CSS code below, but it just doesnt want to work ... I was hoping someone that has used this technique before could shed some light on the topic?

Thanks,

Steven.

CSS Code (i've been working with)

Code:

#content-top a:hover
{
  td.villas-bottom { background-color: #cae8ff; }
}

Index file (showing the relevant DIV's)

Code:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" lang="en" xml:lang="en">

 <head>
  <title>Calabay Exclusive</title>
  <meta name="description" content="" />
  <meta name="keywords" content="" />
  <link type="text/css" rel="stylesheet" href="styles.css" />
 </head>

 <body>

  <div id="container">
    <div id="logo"><img src="images/topside.jpg" /></div>
    <div id="sidebar"><?php include("sidebar.php"); ?></div>
    <div id="content">
      <div id="content-top"><?php include("villas.php"); ?></div>
      <div id="content-bottom"><?php include("page.php"); ?></div>
    </div>
  </div>

 </body>

</html>

Villas Table (showing relevant classes)

Code:

<table class="villas">

  <tr>
    <td class="villas-top"><a href="index.php"><img src="property/property1.jpg" /></a></td>
    <td class="villas-top"><a href="index.php"><img src="property/property2.jpg" /></a></td>
    <td class="villas-top"><a href="index.php"><img src="property/property3.jpg" /></a></td>
    <td class="villas-top"><a href="index.php"><img src="property/property4.jpg" /></a></td>
    <td class="villas-top"><a href="index.php"><img src="property/property5.jpg" /></a></td>
    <td class="villas-top"><a href="index.php"><img src="property/property1.jpg" /></a></td>
    <td class="villas-top"><a href="index.php"><img src="property/property2.jpg" /></a></td>
  </tr>

  <tr>
      <td class="villas-bottom">The Pines</td>
      <td class="villas-bottom">The Pines</td>
      <td class="villas-bottom">The Pines</td>
      <td class="villas-bottom">The Pines</td>
      <td class="villas-bottom">The Pines</td>
      <td class="villas-bottom">The Pines</td>
      <td class="villas-bottom">The Pines</td>
  </tr>

</table>

punky_munky · 18 Feb 2006 at 17:18

It doesn't work because you're hovering over villas-top but you want villas-bottom to change. You could put the picture and the text in a div together, that would probably do the trick.

Conrad11 · 18 Feb 2006 at 17:52

Hi there,

For the hovering effect, you could use it an onhover effect which changes the class of the CSS.

Just search "On hover change class" into google and it should provide the code.

Thanks...

CSS Image Hovering?

MagSafe

MagSafe

punky_munky

punky_munky

Conrad11

Conrad11