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!
Try something like this:
<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.webdeveloper.com/forum/archive/index.php/"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.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!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.I was just about to ask the same thing but now I don't have toAt 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=http://www.webdeveloper.com/forum/archive/index.php/"Normal.htm">Normal Hover...</a>
</td>
<td id="nav"><a href=http://www.webdeveloper.com/forum/archive/index.php/"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.
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!
Try something like this:<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.webdeveloper.com/forum/archive/index.php/"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.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!
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.I was just about to ask the same thing but now I don't have toAt 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=http://www.webdeveloper.com/forum/archive/index.php/"Normal.htm">Normal Hover...</a>
</td>
<td id="nav"><a href=http://www.webdeveloper.com/forum/archive/index.php/"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.