html mouse over text

[S h o o B i E x]

I need to make some changes to some webpages. If you go to mst.edu and scroll down there are different options to choose from. When you scroll your mouse over one the text changes from gray to a green color. Does anyone know the code for this?

 

[alkemyst]

that's just the hover tag in your links description. Just download the css and you can reverse engineer:


<link type="text/css" rel="stylesheet" href="/site_config/type1/css/template.css"></link>
<link type="text/css" rel="stylesheet" href="/local_config/css/override.css"></link>

or http://forums.sixapart.com/lof.../index.php/t35813.html

or http://www.echoecho.com/csslinks.htm

 

[S h o o B i E x]

I'm pretty much a n00b at all this. I've been working with documentum but now just recently started digging into the html aspect. Will css be fine to use with documentum or will there be a problem? Or am I just confusing you?

 

[911paramedic]

#globalNav a:link, #globalNav a:visited {
font-weight: bold;
text-decoration: none;
color: #736343;
}

#globalNav a:hover, #globalNav a:active {
font-weight: bold;
text-decoration:none;
color: #fff4d7;
background-color:#c7a24c;
}

This isn't the exact target, but it shows what's happening. The normal state is one color (the link), and when you hover over it it changes to another color. You will be dealing with some li attribute as opposed to the globalNav div.

 

[911paramedic]

For the front page, in the main area, this is the code you want I believe:

#pageContentArea2full .type1contentbox a:link,#pageContentArea2full .type1contentbox a:visited{
color:#797977;
text-decoration:underline;
}

#pageContentArea2full .type1contentbox a:hover,#pageContentArea2full .type1contentbox a:active{
color:#085806;
text-decoration:underline;
}

 

[TeamZero]

Since you still lack a good explanation, I'd recommend you go read a beginning CSS tutorial.

Here's the quick and dirty


Your links need to be assigned a class, like so:
<a href="http://mylink.com" class="coloredLinks">LINK</a>


You then need to tell the browser what to do with this class:

<style type="text/css">
.coloredLinks{
color:blue;
}

.coloredLinks:hover{
color:red;
}
</style>

Replace the blue with the color or hex code of the color you want the links to be naturally, and the red with the color or hex code you want the links to be when you hover over them.

If you want to remove the underline, the classes would look like this:

<style type="text/css">
.coloredLinks{
color:blue;
text-decoration:none;
}

.coloredLinks:hover{
color:red;
text-decoration:none;
}
</style>

 

[911paramedic]

Originally posted by: TeamZero
Since you still lack a good explanation, I'd recommend you go read a beginning CSS tutorial.

You don't need a class to do this. It's an ul that is already inside a div. Just use the div and then ul li a:link followed by whatever color you want and you are done.

I suggest w3schools for a tutorial on in, very good. And remember, the order is VERY important. In order for it to work, it has to be:
:link
:visited
:hover
:active
:focus

some of those can be grouped, like visited and hover.

This is a simple thing to do in CSS, however it really gets confusing when you have lots of links with different colors.

Feel free to drop me a PM if you need help.

 

[TeamZero]

My explanation was from scratch, and the easiest way to do it. Why are you assuming his links are already going to be in a UL or DIV?

The links on that page already work fine, so he's using them as an example, not asking how to change those specific links

Unless I'm totally incorrect and he really was talking about editing that page, in which case the question was really poorly phrased. 🙁

 

[Woosta]

^ Because you're promoting classitus and unsemantic class names, which should be avoided. Better to use the document hierarchy to your advantage, and no need to bloat the markup with useless bytes, ugly stylesheet filled with class names (puke), using descendant selectors makes it more readable and you know where exactly those links are when moving from stylesheet to markup, back and forth.

W3 schools should be avoided at all costs, just take a look at their godamn markup (horrible mess) - you should be reading w3.org css specs

that's just the hover tag in your links description. Just download the css and you can reverse engineer:

Hover tag? :hover pseudo class of the anchor element you mean?