homepage Welcome to WebmasterWorld Guest from 54.204.141.129
register, free tools, login, search, pro membership, help, library, announcements, recent posts, open posts,
Become a Pro Member
Home / Forums Index / WebmasterWorld / New To Web Development
Forum Library, Charter, Moderators: brotherhood of lan & mack

New To Web Development Forum

    
A not underlined text link that gets underlined
when the mouse gets over it
Franky




msg:960150
 6:34 pm on Aug 30, 2002 (gmt 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

 

NeedScripts




msg:960151
 6:50 pm on Aug 30, 2002 (gmt 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.

Nick_W




msg:960152
 6:57 pm on Aug 30, 2002 (gmt 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

Franky




msg:960153
 7:34 pm on Aug 30, 2002 (gmt 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

Nick_W




msg:960154
 8:09 pm on Aug 30, 2002 (gmt 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

Birdman




msg:960155
 10:01 am on Aug 31, 2002 (gmt 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

Nick_W




msg:960156
 10:38 am on Aug 31, 2002 (gmt 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

Franky




msg:960157
 12:49 pm on Aug 31, 2002 (gmt 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

Nick_W




msg:960158
 1:05 pm on Aug 31, 2002 (gmt 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

Birdman




msg:960159
 4:34 pm on Aug 31, 2002 (gmt 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!

tedster




msg:960160
 7:14 pm on Aug 31, 2002 (gmt 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.

dhdweb




msg:960161
 11:11 pm on Aug 31, 2002 (gmt 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!

Birdman




msg:960162
 4:16 am on Sep 1, 2002 (gmt 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

Filipe




msg:960163
 7:31 pm on Sep 3, 2002 (gmt 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.

Nick_W




msg:960164
 7:35 pm on Sep 3, 2002 (gmt 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

jantmo




msg:960165
 1:43 pm on Sep 4, 2002 (gmt 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.

Franky




msg:960166
 4:44 pm on Sep 7, 2002 (gmt 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

Global Options:
 top home search open messages active posts  
 

Home / Forums Index / WebmasterWorld / New To Web Development
rss feed

All trademarks and copyrights held by respective owners. Member comments are owned by the poster.
Home ¦ Free Tools ¦ Terms of Service ¦ Privacy Policy ¦ Report Problem ¦ About ¦ Library ¦ Newsletter
WebmasterWorld is a Developer Shed Community owned by Jim Boykin.
© Webmaster World 1996-2014 all rights reserved