Ad:

HTML and CSS Discussion Thread
Unsolved
Views: 2324

Jan 11th, 2008

CSS question regarding hover images

Expand Post »

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:

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:

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

Similar Threads

Help on form validation requested. in PHP
MySpace Related : Trying to mount BG image on DIV, won't work, tried a few dif things in JavaScript / DHTML / AJAX
Background question in JavaScript / DHTML / AJAX
CSS help with image links in HTML and CSS
I need help with a parse error! in PHP

Tom Tolleson

Reputation Points: 10

Solved Threads: 0

Light Poster

Offline

39 posts
since Oct 2007

Permalink

Jan 17th, 2008

Re: CSS question regarding hover images

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.

JonathanD

Team Colleague

Reputation Points: 26

Solved Threads: 10

Marketing Consultant

Offline

161 posts
since Aug 2005

Permalink

Jan 17th, 2008

Re: CSS question regarding hover images

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

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:

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.

ShawnCplus

Sponsor

Reputation Points: 520

Solved Threads: 268

Code Monkey

Offline

1,564 posts
since Apr 2005

Permalink

Jan 19th, 2008

Re: CSS question regarding hover images

Click to Expand / Collapse Quote 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

css Syntax (Toggle Plain Text)
.ivt ab:hover {
.ivt ab:hover {

to...

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.

Walkere

Reputation Points: 29

Solved Threads: 5

Junior Poster in Training

Offline

57 posts
since Jan 2008

Permalink

Jan 23rd, 2008

Re: CSS question regarding hover images

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:

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

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:

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);
}

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.

Nichito

Featured Poster

Reputation Points: 424

Solved Threads: 57

Posting Virtuoso

Offline

1,594 posts
since Mar 2007

Permalink

Jan 26th, 2008

Re: CSS question regarding hover images

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

MidiMagic

Reputation Points: 730

Solved Threads: 181

Nearly a Senior Poster

Offline

3,314 posts
since Jan 2007

Permalink

Jan 26th, 2008

Re: CSS question regarding hover images

Click to Expand / Collapse Quote 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.

Walkere

Reputation Points: 29

Solved Threads: 5

Junior Poster in Training

Offline

57 posts
since Jan 2008

Permalink

Jan 28th, 2008

Re: CSS question regarding hover images

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.

MidiMagic

Reputation Points: 730

Solved Threads: 181

Nearly a Senior Poster

Offline

3,314 posts
since Jan 2007

This thread is more than three months old

No one has posted to this discussion for at least three months. Please let old threads die and do not reply to them unless you feel you have something new and valuable to contribute that absolutely must be added to make the discussion complete. Otherwise, please start a new thread in this forum instead.

Previous Thread in HTML and CSS Forum Timeline: Convert Fahrenheit to Celsius

Next Thread in HTML and CSS Forum Timeline: damn internet explorer

DaniWeb Message

Cancel Changes

User Name
Password