HTML and CSS

CSS question regarding hover images

Please support our HTML and CSS advertiser: PostgreSQL or MySQL? Compare and contrast the two most popular open source databases

•

Join Date: Oct 2007

Posts: 39

Reputation: Tom Tolleson is an unknown quantity at this point

Solved Threads: 0

Tom Tolleson Tom Tolleson is offline

Offline

Light Poster

CSS question regarding hover images

Jan 11th, 2008

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:

Help with Code Tags

HTML and CSS Syntax (Toggle Plain Text)

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

Help with Code Tags

HTML and CSS Syntax (Toggle Plain Text)

.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

•

Join Date: Aug 2005

Posts: 160

Reputation: JonathanD is an unknown quantity at this point

Solved Threads: 10

JonathanD

Offline

Marketing Consultant

Re: CSS question regarding hover images

Jan 17th, 2008

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.

WordPress Consulting Services
Google News Blog

•

Join Date: Apr 2005

Posts: 1,435

Reputation: ShawnCplus is a glorious beacon of light

Solved Threads: 233

ShawnCplus ShawnCplus is offline

Offline

Code Monkey

Re: CSS question regarding hover images

Jan 17th, 2008

 Help with Code Tags 
 css Syntax (Toggle Plain Text) 
.tabbar_homepage li.current a b {
.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.,

 Help with Code Tags 
 html Syntax (Toggle Plain Text) 
<div class="tabbar_homepage">
    <ul><li class="current">blah</li></ul>
</div>
<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:

 Help with Code Tags 
 html Syntax (Toggle Plain Text) 
<!-- 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>
<!-- 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.

Last edited by ShawnCplus; Jan 17th, 2008 at 1:44 pm.

GCS d- s+ a-->? C++(++++) UL+++ P+>+++ L+++ E--- W+++
N+ o K w++(---) O? !M- V PS+>++ PE+ Y+ PGP !t- 5? X- R tv+
b+>++ DI+ D G++>+++ e+ h+>++ r y+
PMs asking for help will not be answered, post on the forums. That's what they're there for.

•

Join Date: Jan 2008

Posts: 57

Reputation: Walkere is an unknown quantity at this point

Solved Threads: 5

Walkere

Offline

Junior Poster in Training

Re: CSS question regarding hover images

Jan 19th, 2008

•

Originally Posted by ShawnCplus

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

 Help with Code Tags 
 css Syntax (Toggle Plain Text) 
.ivt ab:hover {
.ivt ab:hover {

to...

 Help with Code Tags 
 css Syntax (Toggle Plain Text) 
.ivt a:hover b {
.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.

•

Join Date: Mar 2007

Posts: 1,429

Reputation: Nichito is an unknown quantity at this point

Solved Threads: 30

Nichito

Offline

Nearly a Posting Virtuoso

Re: CSS question regarding hover images

Jan 23rd, 2008

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:

 Help with Code Tags 
 css Syntax (Toggle Plain Text) 
#nav_bar .first:hover
{
   background-image:url(image2.gif);
}
#nav_bar .first:hover
{
   background-image:url(image2.gif);
}

 Help with Code Tags 
 html Syntax (Toggle Plain Text) 
<table cellpadding="0" cellspacing="0" id="nav_bar">
   <tr>
      <td id="first"><a href="yada yada">yada yada</a></td>
   </tr>
</table>
<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:

 Help with Code Tags 
 css Syntax (Toggle Plain Text) 
#nav_bar td
{
   background-image:url(image1.gif);
}
 
#nav_bar td:hover
{
   background-image:url(image2.gif);
}
#nav_bar td
{
   background-image:url(image1.gif);
}

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

 Help with Code Tags 
 html Syntax (Toggle Plain Text) 
<table cellspacing="0" cellpadding="0" id="nav_bar">
   <tr>
      <td><a href="yada yada">yada yada</a></td>
   </tr>
</table>
<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.

-->sometimes i wanna take my toaster in a bath<--

•

Join Date: Jan 2007

Posts: 3,210

Reputation: MidiMagic has a spectacular aura about

Solved Threads: 166

MidiMagic

Offline

Nearly a Senior Poster

Re: CSS question regarding hover images

Jan 26th, 2008

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

Daylight-saving time uses more gasoline

•

Join Date: Jan 2008

Posts: 57

Reputation: Walkere is an unknown quantity at this point

Solved Threads: 5

Walkere

Offline

Junior Poster in Training

Re: CSS question regarding hover images

Jan 26th, 2008

•

Originally Posted by MidiMagic

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

Last edited by Walkere; Jan 26th, 2008 at 10:57 am.

•

Join Date: Jan 2007

Posts: 3,210

Reputation: MidiMagic has a spectacular aura about

Solved Threads: 166

MidiMagic

Offline

Nearly a Senior Poster

Re: CSS question regarding hover images

Jan 28th, 2008

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.

Daylight-saving time uses more gasoline