third color tab possible? 1

[officemanager2]

Using CSS is it possible to have a third color on a roll over. If the set color is red and the rollover is blue any ideas on how to make one of the tabs rollover to green? I've been working with inline css but no success yet.

Any ideas, or is this not possible?

 

[vacunita]

Give the tab an extra class, and use that to specify the new color:

.tab{
color:red;
}

.tab:hover{
color:blue;
}

.tab.green:hover{
color:green;
}

<div class="tab green">...</div>

----------------------------------
Phil AKA Vacunita
----------------------------------
Ignorance is not necessarily Bliss, case in point:
Unknown has caused an Unknown Error on Unknown and must be shutdown to prevent damage to Unknown.

Behind the Web, Tips and Tricks for Web Development.

http://behindtheweb.blogspot.com/

 

[officemanager2]

Hi: Thanks for this, but the way I've set up the navigation is different.

#navbar #holder ul li a {
	text-decoration:none;
	float:left;
	margin-right:1px;
	margin-left:1px;
	font-family:"Arial Black", Gadget, sans-serif;
	font-size:13px;
	color:#FFF;
	border:3px solid #f00;
	border-bottom:none;
	padding:11px;
	width:100px;
	text-align:center;
	display:block;
	background-color:#006;
	-moz-border-radius-topleft:15px;
	-moz-border-radius-topright:15px;


#navbar #holder ul li a:hover {
	text-shadow:1px 1px 1px #000;
	background-color: #F00;
}

#navbar #holder ul li a:hover GR{
	text-shadow:1px 1px 1px #000;
	background-color: #093;
}

The last bit of code is where the hover would be green and not red. Here is the HTML code

<div id="navbar">
<div id="holder">

<ul>
<li><a href="index.html" id="onlink" >Home</a></li>
<li><a href="shp.html" >Page1</a></li>
<li><a href="prg.html">Page2</a></li>
<li><a href="jbs.html">Page3</a></li>
<li><a href="sen.html">Green</a></li></div>
</ul>


</div> <!-- end holder div-->
</div> <!-- end navbar div-->

I have tried this as well

<li><a href="sen.html" style="color:#093">Green</a></li>

but it turns only the font green. If you get a chance let me know what you think.

 

[vacunita]

You are using links, so just add the class to the link:

<a href="shp.html" [red]class="GR"[/red]>Page1</a>

And then in your CSS:

#navbar #holder ul li a[red].GR[/red]:hover{
    text-shadow:1px 1px 1px #000;
    background-color: #093;
}

----------------------------------
Phil AKA Vacunita
----------------------------------
Ignorance is not necessarily Bliss, case in point:
Unknown has caused an Unknown Error on Unknown and must be shutdown to prevent damage to Unknown.

Behind the Web, Tips and Tricks for Web Development.

http://behindtheweb.blogspot.com/

 

[officemanager2]

Thanks Vacunita that works perfectly.