CSS question regarding hover images

[Tom Tolleson]

Hello!

I have a navigation bar with two tabs on a tab bar. The first represents the page being shown, and the second is a link to a second page. When the first page is being viewed, the first tab is labeled in the markup as ".current." When the second page is viewed, the second tab is is labeled in the markup is current. In the CSS file, when a tab is current, it brings up two images of a colored tab. One for the left side of the tab, and one for the right. The code in the CSS file is:

.tabbar_homepage li.current a {
    color: #fff;
    background: url(http://mysite.com/images/currentLeftTab.gif) no-repeat; 
    background-position: left;
    }

.tabbar_homepage li.current a b {
    color: #fff;
    background: url(http://mysite.com/images/homeRightTab.gif) no-repeat; 
    }

This works great. However, I want to do one thing further: When the other tab (for the non-current page) is moused over, I want two other tab images to come up. Here's the code I'm using:

.ivt a:hover {
    color: #fff;
    background: url(http://mysite.com/images/ivtLeftTab.gif) no-repeat;
}

.ivt ab:hover {
    color: #fff;
    background: url(http://mysite.com/images/ivtRightTab.gif) no-repeat;
}

The left side appears but no the right. I checked in the CSS guide I'm using and it says that this is correct. Does anyone have any recommendations (other than getting a new guide?) ;)

Thanks!

THT

[JonathanD]

I think you need to change it to .ivt a.b:hover {... }

you're telling to select the class of ab when it's really "a" and "b" both. You might even try just using .ivt b:hover {... } and use !important to override the other class settings.

[ShawnCplus]

.tabbar_homepage li.current a b {

To explain what this is doing we have the first bit .tabbar_homepage which means that what we're going to be working with is anything with that class applied. Second is li which tells it any list-item element which that class applied, thirdly we have .current which applies ONLY to list-items within the tabbar_homepage class ie.,

<div class="tabbar_homepage">
    <ul><li class="current">blah</li></ul>
</div>

Next, we have a which will look for an anchor (a) TAG, ie., <a href="hello.html">Hello</a> . Now keep in mind that that was looking for a TAG, so when we get to the b bit it is looking for a b TAG ie., <a href="hi.html"><b>Hello</b></a> So to match that style you would need this:

<!-- I'm using div as a container, doesn't matter what you use -->
<div class="tabbar_homepage">
  <ul>
     <li class="current"><b><a href="test.html">Test</b></a></li>
  </ul>
</div>

So, after all that, we realize that there is no class ab which is what you were looking for, since it is looking for the b tag inside the a tag.

[Walkere]

So, after all that, we realize that there is no class ab which is what you were looking for, since it is looking for the b tag inside the a tag.

And to take this one step further and answer the original question...

I'm thinking you need to change

.ivt ab:hover {

to...

.ivt a:hover b {

In the original example, you're looking for a <b> tag inside of an <a> tag (as Shawn pointed out). So now you want to look for a <b> tag inside of an <a> tag with the psuedo-class hover. Hence a:hover b .

[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.

[MidiMagic]

If you want your websites to be handicap-accessible, do not use hover images.

[Walkere]

If you want your websites to be handicap-accessible, do not use hover images.

I think that paints the problem with far too broad a brush. Why would you have to get rid of all hover images in order to be handicap accessible?

Example. A hover image could be used to change the background of a link, simply to show that it is "hovered." Same way you would change the color of a link to show your mouse is over it. Purely visual, doesn't effect the functionality of the site. No reason it'll impair use by someone that won't be able to see the hover image.

Example. If you use a css-hover menu, you can use an alternate style sheet to make all of the links displayed, rather than not displayed until moused over.

There may be some cases where using hover images might impair the use of your website by someone using a screen reader - but there are plenty of situations where you can accommodate handicap users by making accessibility modifications.

We didn't make the world flat for people with wheelchairs. We built ramps.

- Walkere

[MidiMagic]

True. But there are more troubles than those you mention:

- It causes problems for dyslexic people. making it hard for them to read the text. The change sort of resets the perceived visual image, and the person has to start reading it again.

- It causes trouble with people using mouse trails, by erasing part of the trail. The person then sees the mouse in a position other than where it is.

- Mouse keys users also have problems.