1. This site uses cookies. By continuing to use this site, you are agreeing to our use of cookies. Learn More.

CSS Image Hovering?

Discussion in 'HTML, Graphics & Programming' started by MagSafe, 17 Feb 2006.

  1. MagSafe

    Wise Guy

    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.

    [​IMG]

    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>
     
  2. punky_munky

    Mobster

    Joined: 17 Oct 2002

    Posts: 2,964

    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.
     
  3. Conrad11

    Soldato

    Joined: 12 Jun 2005

    Posts: 5,362

    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: 18 Feb 2006