Member Avatar for ndeniche

have a similar problem: i have my #nav_bar id with a .first class, which i have originally with an image. but, i want it to change image when it's hovered on, like this:

#nav_bar .first:hover
{
   background-image:url(image2.gif);
}
<table cellpadding="0" cellspacing="0" id="nav_bar">
   <tr>
      <td id="first"><a href="yada yada">yada yada</a></td>
   </tr>
</table>

but nothing happens...

am i doing something wrong?

originally i had this:

#nav_bar td
{
   background-image:url(image1.gif);
}

#nav_bar td:hover
{
   background-image:url(image2.gif);
}
<table cellspacing="0" cellpadding="0" id="nav_bar">
   <tr>
      <td><a href="yada yada">yada yada</a></td>
   </tr>
</table>

and it worked perfectly, but then i added some elements at the sides of the navigation bar buttons which i don't want affected by the hover.

  • 4 Contributors
  • 7 Replies
  • 312 Views
  • 2 Years Discussion Span
  • Latest Post Latest Post by kewp
Member Avatar for ShawnCplus 
<td id="first">

V

<td class="first">
Member Avatar for ndeniche

sorry... my bad... actually, i have it that way:

<td class="first">

, but still, when i hover the navigation bar, nothing happens...

Member Avatar for ndeniche

i found out where my mistake was, for whoever is interested...

the following is the correct form:

#nav_bar .first
{
   background-image:url(image1.gif);
}

#nav_bar td.first:hover
{
   background-image:url(image2.gif);
}

the class .first must follow the object it is affecting, in this case td , and must be followed by the pseudoclass (or action) you want it to be activated by, in this case :hover hope it is useful...

Member Avatar for kewp

thanks man, that helped. works in firefox and chrome but not in ie...

Edited by kewp because: n/a
Member Avatar for kewp

wait. a simpler way is to say

.myClass:hover {...}

but then add this to the top of your html

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN"
"http://www.w3.org/TR/html4/strict.dtd">

amazingly it seems to fix the problem for all browsers

Member Avatar for MidiMagic

Please note that objects that change when hovered over have been determined to be "not accessible" to people with perception disabilities. Also be aware that some countries require websites to be accessible.

Member Avatar for kewp

Please note that objects that change when hovered over have been determined to be "not accessible" to people with perception disabilities. Also be aware that some countries require websites to be accessible.

how come?

Be a part of the DaniWeb community

We're a friendly, industry-focused community of developers, IT pros, digital marketers, and technology enthusiasts meeting, networking, learning, and sharing knowledge.