Double HOVER colors?

**Strifer** · 04-07-2003 06:05 AM

Hi All!

I'm making a website and I want it to look good. I've always liked the hover command to diplay the text in another color when you hover your mouse over it. I made this work in my CSS file and all is working properly.

But.. now onto the problem. My webpage has three base-colors and the text is white, but when you hove rove rit it changes to one of the THREE base colors. Normally this works well, but I've got a table on my website too with another background color, which is actually the same as the hover color. I can't (or don't want to would be bettter) change the the base and background color, so I want to change the hover color. But only on a specifick place, not for the whole html document.

So.. is there a way to have more than ONE hover color on a website using CSS? Or HTML? I've searched the web, but I haven't come up with anything good. I really want to make this work, right now my text is 'disappearing' when you hover your mouse over the textlink

HELP!

**pyro** · 04-07-2003 07:26 AM

Try something like this:

Code:

<style type="text/css">
A.tablelinks:link, A.tablelinks:visited, A.tablelinks:active
{
	color: darkblue;
	text-decoration: none;
}
A.tablelinks:hover
{
	color: red;
	text-decoration: none;
}
</style>
</head>
<body>
<a href="http://www.w3c.org" class="tablelinks">test</a>

Then, you just give the class tablelinks to any link that you want to use this css.

**Strifer** · 04-07-2003 07:41 AM

Okay, this opened up some perspectives for me to work on. But what if the two text parts already have a class assigned to them? The normal one just with the one with the hover command in it and the special one with a few other settings. Should i add the thing you posted here to the special one?

Or should I just write a separate CSS for those pages (i actually have that already) and use your method on the two (only two of them) text-links that need a different hover color?

Now that I think of it.. the second method, your method, sounds way easier!

Thanks for the help! you're great!

**kryogenic** · 04-16-2003 08:53 PM

something neato 'bout CSS ----> it carries 3 primary managers for tags.

1. #ID
2. .CLASS
3. A:hover(standard feature)

All can be implemented at the same time to the same tag..though it will become confusing to edit later on for high end sites.

the last method that can be added even with the above 3 would be placing it directly into your HTML
ie:
<A id="butter" Class="peanut" Style="cursor:hand;"></a>

hope this gives you a lot to play with.

**neil** · 04-28-2003 05:35 AM

I was just about to ask the same thing but now I don't have to

**KeshavaR** · 05-05-2003 04:39 AM

At times whenever, new hover effects are required in the same page, the concept of ID can be effectively used as shown below :

<table>
<tr class="genfont">
<td><a href="Normal.htm">Normal Hover...</a>
</td>
<td id="nav"><a href="Test.htm">New Hover...</a>
</td>
</tr>
</tr>
</table>

Now, the <td> id="nav" corresponds to new set of class defined in your External Style Sheet.

#nav a:link , #nav a:active , #nav a:visited
{
font-size:7.5pt;
color:blue;
cursor:default;
text-decoration:none;
}
#nav a:hover
{
font-size:7.5pt;
color:red;
cursor:hand;
text-decoration:underline;
font:bold;
}

Similarly, different cell ID's can be made use to enhance the User Interface of site.

Thread: Double HOVER colors?

Thread Tools

Display

Double HOVER colors?

Re: Double HOVER colors?

Thread Information

Users Browsing this Thread

Bookmarks

Bookmarks

Posting Permissions