CODEWITHSUNDEEP
css
FLY
FLY

Reputation: 2469

CSS a:hover keep original color

Is it possible to keep the color on a link with a class while other links do change.

For example I have a theme but i want it to support different colors set by the user.

Most links change color on :hover but some must stay the same color.

#red is generated by the theme. I want to 'inherit' the a.someclass:link color in the a.someclass:hover

example:

a:link
{
  color: #red;
}
a:hover {
  color: #black;
}

The above part is generated which I cannot alter.

As suggested in answers and comments below I need to build this with jQuery

sure I can copy #red to the a.someclass:hover {} but then i have to hardcode the color and since the user should be able to change the color that is not an option.

I need something to overide the a:hover { color } if the class is someclass

Upvotes: 8

Views: 21009

Answers (4)

zurfyx
zurfyx

Reputation: 32807

You can make use of currentColor

a.no-color-change:hover {
  color: currentColor;
}

Upvotes: 18

FLY
FLY

Reputation: 2469

As suggested by @danferth and @maxisam here is my jQuery solution I've written to make this work:

$(document).ready(function(){
   // getting the color before the color is changed ( not sure this is needed )
  var thecolor = $('.article-title').css("color");
  $(".article-title").mouseover(function() {
    // setting the color previously picked
    $(this).css({'color':thecolor});
  });       
});

where .article-title is the class of the links I want to alter

Upvotes: 1

Danferth
Danferth

Reputation: 1879

Like maxisam said above you will probably have to use js to do this. Try using jQuery's .hover() or .mouseover() .mouseout() to change the css. You would of course have to trigger these functions somehow when the user switches themes. Good luck.

Upvotes: 1

Jules
Jules

Reputation: 7233

Why not do this then?

a:link, a.someclass:hover
{
  color: #red;
}

At least if I understand your question correctly.. This will make sure both your <a> tags will have the same color as the <a class="someclass"> ones when hovered.

Upvotes: 1

Related Questions