Welcome to WebmasterWorld Guest from 54.198.43.125

Forum Moderators: mack

Message Too Old, No Replies

A not underlined text link that gets underlined

when the mouse gets over it

     
6:34 pm on Aug 30, 2002 (gmt 0)

New User

10+ Year Member

joined:Aug 27, 2002
posts:21
votes: 0


I have a next question:

How do I create a text link that is not underlined, but gets underlined when you put your mouse on it?

Thanks,
greetings Franky

6:50 pm on Aug 30, 2002 (gmt 0)

Senior Member

WebmasterWorld Senior Member 10+ Year Member

joined:June 4, 2002
posts:720
votes: 0


You can use CSS or just regular link.hover tag.

If you are using frontpage, just click on link property and select the options.

6:57 pm on Aug 30, 2002 (gmt 0)

Senior Member

WebmasterWorld Senior Member nick_w is a WebmasterWorld Top Contributor of All Time 10+ Year Member

joined:Feb 4, 2002
posts:5044
votes: 0


In your html:

<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

7:34 pm on Aug 30, 2002 (gmt 0)

New User

10+ Year Member

joined:Aug 27, 2002
posts:21
votes: 0


Thanx Needscripts and Nick_W for your quick response!

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

8:09 pm on Aug 30, 2002 (gmt 0)

Senior Member

WebmasterWorld Senior Member nick_w is a WebmasterWorld Top Contributor of All Time 10+ Year Member

joined:Feb 4, 2002
posts:5044
votes: 0


CSS is Cascading Style Sheets.

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

10:01 am on Aug 31, 2002 (gmt 0)

Senior Member

WebmasterWorld Senior Member 10+ Year Member

joined:Apr 22, 2002
posts:2546
votes: 0


Nick_w. Why not just <a class="mouseover" href="">link</a> ? Just wondering why you put it in a <div>. Hello again Franky. Stick around here and you will see Nick's name alot. Very helpful and wise, as are many people here on this forum. And I definitely would recommend those links above. I like w3schools.com, personally.

Birdman

10:38 am on Aug 31, 2002 (gmt 0)

Senior Member

WebmasterWorld Senior Member nick_w is a WebmasterWorld Top Contributor of All Time 10+ Year Member

joined:Feb 4, 2002
posts:5044
votes: 0


Not sure about wise after my lame example, but thanks anyway ;)

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

12:49 pm on Aug 31, 2002 (gmt 0)

New User

10+ Year Member

joined:Aug 27, 2002
posts:21
votes: 0


Hello 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

1:05 pm on Aug 31, 2002 (gmt 0)

Senior Member

WebmasterWorld Senior Member nick_w is a WebmasterWorld Top Contributor of All Time 10+ Year Member

joined:Feb 4, 2002
posts:5044
votes: 0


Pop this in:

[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

4:34 pm on Aug 31, 2002 (gmt 0)

Senior Member

WebmasterWorld Senior Member 10+ Year Member

joined:Apr 22, 2002
posts:2546
votes: 0


Yes, CSS with links is very fun to play with and it sure beats that old javascript rollover. Positioning with CSS is also very cool, once you get the hang of it. Check out XHTML, too. They go well together. Have fun!
7:14 pm on Aug 31, 2002 (gmt 0)

Senior Member

WebmasterWorld Senior Member tedster is a WebmasterWorld Top Contributor of All Time 10+ Year Member

joined:May 26, 2000
posts:37301
votes: 0


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.
11:11 pm on Aug 31, 2002 (gmt 0)

Full Member

10+ Year Member

joined:Apr 4, 2002
posts:236
votes: 0


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!

4:16 am on Sept 1, 2002 (gmt 0)

Senior Member

WebmasterWorld Senior Member 10+ Year Member

joined:Apr 22, 2002
posts:2546
votes: 0


In case you use them all...
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 */

Use that order. That tidbit of info eluded me for quite some time. Not that anyone cares about :active, though.

Like Nick_w says...

Also, try adding background-color: #000000;
or whatever to the rules. You can have lot's of fun with it

You can do many things to change the appearance of a web page with CSS. You could make <h6>appear this small</h6>, if you want. The possibilities are limitless! :o
7:31 pm on Sept 3, 2002 (gmt 0)

Preferred Member

10+ Year Member

joined:Apr 25, 2002
posts:470
votes: 0


Franky, it should also be noted, for good design practice you should always have all your links underlined so users can tell the difference between plain text and links right off.
7:35 pm on Sept 3, 2002 (gmt 0)

Senior Member

WebmasterWorld Senior Member nick_w is a WebmasterWorld Top Contributor of All Time 10+ Year Member

joined:Feb 4, 2002
posts:5044
votes: 0


I hear you!

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

1:43 pm on Sept 4, 2002 (gmt 0)

New User

10+ Year Member

joined:Sept 3, 2002
posts:3
votes: 0


You might try this

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.

4:44 pm on Sept 7, 2002 (gmt 0)

New User

10+ Year Member

joined:Aug 27, 2002
posts:21
votes: 0


Nick_W, tedster, Birdman, Filipe and jantmo, thank you all for your responses and thinking with me! You've been a great help and inspiration, I really feel I am in a webmasterworld here!

Greetings,
Franky

 

Join The Conversation

Moderators and Top Contributors

Hot Threads This Week

Featured Threads

Free SEO Tools

Hire Expert Members