CSS Image Hovering?

Associate
Joined
12 Aug 2004
Posts
1,009
Location
Glasgow, Scotland
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.

tempimage.jpg


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>
 
Soldato
Joined
17 Oct 2002
Posts
3,015
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.
 
Soldato
Joined
12 Jun 2005
Posts
5,361
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...
 
Last edited:
Back
Top Bottom