Welcome to WebmasterWorld Guest from 54.147.44.93

Forum Moderators: brotherhood of lan & mack

Message Too Old, No Replies

A not underlined text link that gets underlined

when the mouse gets over it

     

Franky

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

10+ Year Member



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

NeedScripts

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

WebmasterWorld Senior Member 10+ Year Member



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

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

Nick_W

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

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



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

Franky

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

10+ Year Member



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

Nick_W

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

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



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

Birdman

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

WebmasterWorld Senior Member 10+ Year Member



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

Nick_W

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

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



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

Franky

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

10+ Year Member



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

Nick_W

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

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



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

Birdman

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

WebmasterWorld Senior Member 10+ Year Member



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!

tedster

7:14 pm on Aug 31, 2002 (gmt 0)

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



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.

dhdweb

11:11 pm on Aug 31, 2002 (gmt 0)

10+ Year Member



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!

Birdman

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

WebmasterWorld Senior Member 10+ Year Member



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

Filipe

7:31 pm on Sep 3, 2002 (gmt 0)

10+ Year Member



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.

Nick_W

7:35 pm on Sep 3, 2002 (gmt 0)

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



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

jantmo

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

10+ Year Member



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.

Franky

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

10+ Year Member



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

 

Featured Threads

Hot Threads This Week

Hot Threads This Month