Is there any way to differentiate between link behavior

[JoyceOdell]

Is there any way to differentiate between the behavior of links depending upon how they are placed?

Specifically, I am happy with the behavior of the link text when it's on a button. Not so much when it is sitting out on the page as text, such as a download link, or is incorporated into a paragraph. After all, the button background changes on hover to contrast with the text in its hover state. The general page background does not. 

Ideally I would like to create a different link style for text out on the page with a hover state that uses a different color from that of a button text. I would expect that to be possible with .css, but there doesn't appear to be any way to seperate the two.

Does anyone have any suggestions on whether this is possible?

[osgood_]

Just add a css class to the link tag as below:

<a href='some-link.html' class='linkText">Text Link</a>

Then style the link tag with css:

.linkText {

text-decoration: none;

color: red;

}

.linkText:hover {

background-color: red;

color: #fff;

}

[JoyceOdell]

Thanks. It certainly *seemed* like it ought to be possible.

[Nancy OShea]

A basic example using HTML semantic tags.

<nav>

Link | Link | Link

</nav

<main>

<p>Lorem ipsum dolor, LINK.</p>

</main>

<footer>

LINK | LINK | LINK

</footer>

CSS styles:

nav a {color:red}

main a {color:blue}

footer a {color:green}

Hope that helps.

[JoyceOdell]

Okay, it looks like I need a bit of further instruction here.

This is what I've got in the style sheet.
----------------------------------

a:link {

    color: #851010;

    text-decoration: none;

}

a:visited {

    color: #808080;

    text-decoration: none;

}

a:hover {

    color: #FFd700;

    text-decoration: none;

}

a:active {

    color: #000000;

    text-decoration: none;

}

p, h1, h2, h3, h4, h5, h6, li { margin: 10px 0px; } 

p {

    font-family: verdana, sans-serif;

    font-weight: normal;

    line-height: 145%;

    font-size: 1em;

} 

.link-text {

    color: #B30000;

    font-family: Arial, verdana, sans-serif;

    font-weight: 600;

    font-size: 1em;

    text-decoration: underline;

    line-height: 3em;

    text-align: center;
---------------------------------

How do I give the ".link-text" class a different hover state? The only thing I want to change is the hover state. At present it applies all of the current linking states from the set of four main .css link states -- which were designed for buttons. The ".link-text" class applies the center alignment, and the underline, and the general formatting, but it does nothing about the various linking states.

How do I change *only* the hover state of the ".link-text" class? I will want to change it across the whole site, so it only needs to work once. But I haven't been able to get it to work at all.

[osgood_ · Accepted solution]

Because you have set a higher specificity by using a:link, a:visited etc (which targets ALL a tags) you need to use the 'important' keyword:

.link-text {

color: #B30000!important;

}

.link-text:hover {

color: green!important;

}

<a href="#" class="link-text">Link</a>

I don't set an overall styling for the a tag. I tend to target them:

<div class="products">

<a href="product_1.html">Product 1</a>

</div>

.products a {

color: red:

}

.products a:hover {

color: pink;

}

[JoyceOdell]

That did it! Thank you very much.

[BenPleysier]

If you choose to use Bootstrap the code would look like

<a class="btn btn-primary" href="#" role="button">Link</a>

See for more...

[Jon Fritz]

One thing to keep in mind, if using standard CSS pseudo-classes for your links, they need to be in order in your stylesheet or they can act strangely...

a:link {properties:values;}        (a link that hasn't been visited yet in your browser history)
a:visited {properties:values;}   (a visited link in your browser history)
a:hover {properties:values;}    (a link that is being hovered over by the mouse pointer)
a:active {properties:values;}    (a link that is actively being clicked. NOT a link to the page you are currently on)

There is also a:focus, but it's not part of the 4 above and can appear anywhere you like...

a:focus {properties:values;} (a link that has the tab focus from your browser. Handy in bringing attention to links during keyboard navigation)

[JoyceOdell]

Yeah, that makes all kinds of sense.