Forum Moderators: mack
How do I create a text link that is not underlined, but gets underlined when you put your mouse on it?
Thanks,
greetings Franky
If you are using frontpage, just click on link property and select the options.
<div class="mouseover">
<a href="#">Test link</a>
</div>
and in your css:
.mouseover a {
text-decoration: none;
}
.mouseover a:hover {
text-decoration: uderline;
}
Nick
But unfortunately I don't understand what you mean by 'CCS', and Needscripts I don't use frontpage and I don't know what you mean by 'link.hoover.tag'.
So I think you gave me neat answers, but they don't help me so far.
Franky
You can put them in the <head> of your docurment or link to them. Thy best thing I can do for you here is to point you in the right directeion:
[w3.org ]
[w3schools.com ]
[westciv.com ]
Nick
Birdman
The truth is I was a little squiffy when I wrote that and obviously not thinking straight. I use it on my own site because my needs are a little more complex than Franky's question:
Here is the real answer
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.1//EN" "xhtml11.dtd">
<?xml version="1.0" encoding="iso-8859-1"?>
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en">
<head>
<style type="text/css">
body {
color: #000000;
background-color: #FFFFFF;
}
h1 {
font: bold 2em arial, verdana;
}
p {
font-family: verdana, arial, verdana;
width: 40%;
}
.mouseover {
text-decoration: none;
}
.mouseover:hover {
text-decoration: underline;
}
</style>
<title>Links example</title>
</head>
<body>
<h1>Links example</h1> <p>This is an example using just the class as Birdman suggested<br />
<a href="#" class="mouseover">Test link</a></p>
<p>If you want to do this for <strong>every link</strong> on the
page then you should use the following css:</p>
<pre>
a:link {
text-decoration: none;
}
a:hover {
text-decoration: underline;
}
</pre>
</body>
</html>
Nick
Thanks for your help, your links, and explaining about CCS! I have a global understanding now of how it works.
I've tried the things you wrote in your last message; the class as Birdman suggested works fine! But I have a little trouble with your CSS,
a:link {
text-decoration: none;
}
a:hover {
text-decoration: underline;
}
And there are is something strange going on: one time it works, but the other time when I reload the same page shortly afterwards, it doesn't work and underlines all the links! And when it works, it only works for links within the page, the 'a href="#"'-links. It doesn't work for a link to another page (within a frame).
Greetings,
Franky
[pre]
a:visited {
text-decoration: none;
}
[/pre]
You can also mess around with a:active if you like but I've never found a reason to use it...
Also, try adding background-color: #000000;
or whatever to the rules. You can have lot's of fun with it but remember to keep it usable! ;)
Nick
One thing to note - a:visited should PRECEDE a:hover in the stylesheet to get the behaviors to work properly. Otherwise you may notice that "visited" styles don't display as you intended.
Great tip Tedster,
I have run into that before, it took days to figure out!
a:link {color: #FF0000} /* unvisited link */
a:visited {color: #00FF00} /* visited link */
a:hover {color: #FF00FF} /* mouse over link */
a:active {color: #0000FF} /* selected link */
Like Nick_w says...
Also, try adding background-color: #000000;
or whatever to the rules. You can have lot's of fun with it
But, if you display your links as blocks with borders, backgrounds and hover effects they just look like buttons...
and if they're in a traditional 'nav place' then they're easy to spot ;)
Nick
put it in the BODY of the page
<style type="text/css">
a:link {color:"#0000ff";text-decoration:none;}
a:active {color: "#ff00ff";}
a:visited {color:"#0000ff" ;text-decoration:underline;}
a:hover {color:"#000080";}
</style>
This should work or some thing close to that I used this code to make my hovered links appear bold with out the text decoration attribute.
Hope this helps.
Greetings,
Franky
