WhiteTiger
Programmer
How can I make a rollover link so all links change color when I hover over them? When life gives you lemons...throw them back and get the oranges you ordered! :-Q
Tek-Tips is the largest IT community on the Internet today!
Members share and learn making Tek-Tips Forums the best source of peer-reviewed technical information on the Internet!
-
Congratulations gkittelson on being selected by the Tek-Tips community for having the most helpful posts in the forums last week. Way to Go!
Link Rollover w/ CSS 2
- Thread starter WhiteTiger
- Start date
- Status
PepperPepsi
Programmer
Hi,
this should works in NS6 and IE4+,
<style>
.MyLink
{
FONT-FAMILY: Verdana;
TEXT-DECORATION: none;
}
.MyLink:hover
{
FONT-FAMILY: Verdana;
TEXT-DECORATION: underline;
}
</style>
<a href="" class="MyLink">HERE</a>
hope this helps,
Chiu Chan
WebMaster & Software Engineer
emagine solutions, inc
cchan@emagine-solutions.com
this should works in NS6 and IE4+,
<style>
.MyLink
{
FONT-FAMILY: Verdana;
TEXT-DECORATION: none;
}
.MyLink:hover
{
FONT-FAMILY: Verdana;
TEXT-DECORATION: underline;
}
</style>
<a href="" class="MyLink">HERE</a>
hope this helps,
Chiu Chan
WebMaster & Software Engineer
emagine solutions, inc
cchan@emagine-solutions.com
Hey there,
I think rather than text decoration the attribute you're looking for is 'hover'.
In your CSS or inline style or however you choose to implement it you should add something like this:
A:hover {color: red}
This would make your links turn red when the mouse is over them.
Oh, hang on, just re-read PepperPepsi's post and he's pretty much on the money.
I think rather than text decoration the attribute you're looking for is 'hover'.
In your CSS or inline style or however you choose to implement it you should add something like this:
A:hover {color: red}
This would make your links turn red when the mouse is over them.
Oh, hang on, just re-read PepperPepsi's post and he's pretty much on the money.
-
2
- #5
hie here is some workaround for nn4
hover for netscape:
<html>
<head>
<style type="text/css">
A.over:link { color: red; }
A.over:visited { color: red; }
A.over:active { color: red; }
A.regular:link { color: green; }
A.regular:visited { color: green; }
A.regular:active { color: green; }
</style>
<script language="javascript">
function over(letter){
document.layers[letter+"Top"].document.layers[letter].visibility='hide';
}
function out(letter){
document.layers[letter+"Top"].document.layers[letter].visibility='show';
}
</script>
</head>
<body>
<table width=100% height=100%>
<tr align=center>
<td width=50%></td>
<td align=center>
<ilayer id="aTop" left=100>
<layer><a href="somepage.html" class="over" onmouseout="out('a')">Link</a></layer>
<layer id="a"><a href="somepage.html" class="regular" onmouseover="over('a')">Link</a></layer>
</ilayer>
</td>
</tr>
<tr align=center>
<td>
<ilayer id="pTop">
<layer><a href="somepage.html" class="over" onmouseout="out('p')">Link</a></layer>
<layer id="p"><a href="somepage.html" class="regular" onmouseover="over('p')">Link</a></layer>
</ilayer>
</td>
</tr>
<tr align=center>
<td>
<ilayer id="fTop">
<layer><a href="somepage.html" class="over" onmouseout="out('f')">Link</a></layer>
<layer id="f"><a href="somepage.html" class="regular" onmouseover="over('f')">Link</a></layer>
</ilayer>
</td>
</tr>
</table>
</body>
</html>
regards, vic
hover for netscape:
<html>
<head>
<style type="text/css">
A.over:link { color: red; }
A.over:visited { color: red; }
A.over:active { color: red; }
A.regular:link { color: green; }
A.regular:visited { color: green; }
A.regular:active { color: green; }
</style>
<script language="javascript">
function over(letter){
document.layers[letter+"Top"].document.layers[letter].visibility='hide';
}
function out(letter){
document.layers[letter+"Top"].document.layers[letter].visibility='show';
}
</script>
</head>
<body>
<table width=100% height=100%>
<tr align=center>
<td width=50%></td>
<td align=center>
<ilayer id="aTop" left=100>
<layer><a href="somepage.html" class="over" onmouseout="out('a')">Link</a></layer>
<layer id="a"><a href="somepage.html" class="regular" onmouseover="over('a')">Link</a></layer>
</ilayer>
</td>
</tr>
<tr align=center>
<td>
<ilayer id="pTop">
<layer><a href="somepage.html" class="over" onmouseout="out('p')">Link</a></layer>
<layer id="p"><a href="somepage.html" class="regular" onmouseover="over('p')">Link</a></layer>
</ilayer>
</td>
</tr>
<tr align=center>
<td>
<ilayer id="fTop">
<layer><a href="somepage.html" class="over" onmouseout="out('f')">Link</a></layer>
<layer id="f"><a href="somepage.html" class="regular" onmouseover="over('f')">Link</a></layer>
</ilayer>
</td>
</tr>
</table>
</body>
</html>
regards, vic
- Thread starter
- #6
WhiteTiger
Programmer
Thanks, but who needs NN anyways?...LOL
Everyone that comes to my site will use Internet Explorer 5...or else! When life gives you lemons...throw them back and get the oranges you ordered! :-Q
Everyone that comes to my site will use Internet Explorer 5...or else! When life gives you lemons...throw them back and get the oranges you ordered! :-Q
- Status
Similar threads
- Locked
- Question