Change individual link hover colour

[DarkArcher]

How do I change the hover and link colour of an individual link without affecting the other links in the same div layer?

I want to avoid having to place the link in a new div class and using CSS to style it. What should I do?

[boogyman]

create an id for that link



<a id="link" href="">LINK TITLE</a>




a#link:hover {color:#hexadecimal}

[DarkArcher]

Thanks, that worked. I wonder why I have to use id instead of class to make it work... any reason?

[Medyman]

CSS is based on a cascade of rules (hense cascading style sheets) based on the level of specificity by which you call your elements.

Depending on where where you're calling that class and what other rules are being applied to it, and the div that it's contained it, this could change the behavior.

Unless you're using inline styles, an element id is the most specific that you can get, thus it will trump all your other styles.

But there is no inherent limitation of using classes over ids for what you want to do. It all depends on the markup.

Just thought I'd clear that up :)

[lando2319]

Hello,

Could you offer your expertise... I am working on http://www.mygoodcounsel.com/blog/

Looking to add a hover color to the RSS link at the top

I am in the index.php file trying to adjust the hover color. Here is my current code:

<p>
<h2>goodthinking!<br /><br />
<a id="link" href="<?php bloginfo('rss2_url'); ?>"><a#link:hover {color:#a6bc09}><span style="text-decoration: underline;"><span style="color: #525759; text-decoration: underline; ">click here to follow my RSS feed</span></span></a></a></h2></p>

I tried a few variations, seems like I am close. At the end of the day I want the link to be color #525759 with a hover color of #a6bc09.

Any suggestions?

[ApacheTech]

You can use multiple classes for the same element.


a {
color: #000000;
}

.red {
color: #ff0000;
}

.no_underline {
text-decoration: none;
}


<a href="http://www.google.com">http://www.google.com</a>

appears as:

http://www.google.com


<a class="red no_underline" href="http://www.google.com">http://www.google.com</a>

appears as:

http://www.google.com

[lando2319]

Forgive me, Here is the part of what I believe to be the relevant part of the index.php. Where do you insert this code?

<?php get_header(); ?>

<p>
<h2>goodthinking!<br /><br />
<a href="<?php bloginfo('rss2_url'); ?>">click here to follow my RSS feed</a></h2></p>

<?php if (have_posts()) : ?>

[elenaluna]

create an id for that link



<a id="link" href="">LINK TITLE</a>




a#link:hover {color:#hexadecimal}

Thanks, I was looking how to change the hover and link colour of an individual link without affecting the other links in the same div and this way really works.
--


[Moderator's note: spam removed]

[ApacheTech]

The following would make the Google link hover in blue, while the others will hover in red.


<div id="links_container">
<a href="http://www.yahoo.com" target="_blank">Yahoo!</a>
<a class="altLink" href="http://www.google.com" target="_blank">Google</a>
<a href="http://www.excite.com" target="_blank">Excite</a>
<a href="http://www.lycos.com" target="_blank">Lycos</a>
</div>

CSS:

#links_container a:hover {
color: #ff0000
}

#links_container .altLink:hover {
color: #0000ff
}