• Lesson Index:
• Introduction
• Table Tab Menu
• Overview
• Table Structure
• Cross Browser Issues
• Hover Effect
• Replacing Tab Image
• Remove Bottom Border
• Duplicating the Pages
• Javascript Rollover
• RollOver Images
• Examine the Code
• JS with CSS-class
• Use Single Image
• CSS Rollover Buttons
• CSS Hover Rollovers
• Use Single Image

Table Tab Menu: Hover Effect

The hover effect is when the user hover over the tab, the tab background image changes from the default_tab.gif image to the highlighted_tab.gif image. We are going to use the CSS pseudo-class called "hover" to implement this effect. In Internet Explorer 6.0 and before, the hover pseudo-class only works on the <a> tag.

Hence, we need to move the background image property from the td selector to the a selector as shown...

This has no effect on the display of the tabs.

Now we add the a:hover pseudo-class with a different background image and a different text color...

Run the Live Code and you will see that the hover effect works now.

Selected State

Suppose we want the Welcome tab to be highlighted when we are on the Welcome page. In the Welcome page HTML, we must have a way to indicate which tab is selected (or highlighted). We do this by adding an id of "selectedtab" to the table cell of the tab that is to be highlighted.

Now add this selector to the style section to have the same properties as the hover state...

The added selector ...

table#tabmenu td#selectedtab a

selects all <a> tags found within a td with id of selectedtab found within a table of id tabmenu. It then styles the selected element to have a background image of highlighted_tab.gif and text color of #FFFFCC. These are exactly the same properties as the hover state, because we had attached this selector to the same rule as the

table#tabmenu td.tab a:hover

selector. We attached two selectors to the same rule via the comma. See that comma in the above code picture?

Now the Welcome tab is always highlighted because the Welcome tab is sitting inside a td of id="selectedtab".

View live code

You now got a working tab menu.

Next Lesson: