Clever Geek Handbook

Change Link CSS Color No Change: Hover Color

Here I have never come across:

/* These first two rules are in a CSS library */
a { 
  color: #1EAEDB;
}

a:hover { 
  color: #0FA0CE;
}

/* This rule is my own */
.example a:link {
  color: #000;
}
      

        
        
        
      

    
<div class="example">
  <a href="http://stackoverflow.com/doesntexist">StackOverflow</a>
</div>
Run codeHide result


I'm trying to change the color of just the: link state, without affecting the: hover. Is this possible in CSS?

The first two rules are from the library, so I cannot change them or their order.

+3


source to share


3 answers


Yours :link

has a class in front of it, so is more specific , and the hover is now placed in front :link

, so the color will be overwritten with the color :link

.

Here's a neat spec calculator .

With restrictions imposed

Duplicate :hover

and place the class in front of it to increase its specificity. Make sure that you use the order LVHA ( :link

, :visited

, :hover

, :active

)

a {
  color: #1EAEDB;
}
a:hover {
  color: #0FA0CE;
}
.example a:link {
  color: #000;
}
.example a:hover {
  color: #0FA0CE;
}
      

        
        
        
      

    
<div class="example">
  <a href="http://stackoverflow.com/doesntexist">StackOverflow</a>
</div>
Run codeHide result




The correct way is no limits

  • Use .example a:hover

    .

  • Place :hover

    after :link

    . Make sure that you use the order LVHA ( :link

    , :visited

    , :hover

    , :active

    ) (Emphasis mine):

    The link: pseudo-class allows you to select links within elements. This will select any link, even those already created using a selector with other pseudo-classes related to the: hover,: active or: visited link . In ordering only unvisited links, you need to set the: link rule before the others, as defined by LVHA-order :: link -: visited -: hover -: active.

Working example

a {
  color: #1EAEDB;
}
.example a:link {
  color: #000;
}
.example a:hover {
  color: #0FA0CE;
}
      

        
        
        
      

    
<div class="example">
  <a href="http://stackoverflow.com/doesntexist">StackOverflow</a>
</div>
Run codeHide result


+4


source


You must specify: hover css

.example a:link {
  color: #000;
}
.example a:hover{
  color: #0FA0CE;
}

Because .example a:link

more specific thana:hover



See how concreteness works:

Selector (per selector)          |Specificity    |     Specificity
----------------------------------------------------------------
inline-style                     | 1 0 0 0       |      1000
id selector                      | 0 1 0 0       |       100
class,pseudo,attribute selector  | 0 0 1 0       |        10
type selector and pseudo elements| 0 0 0 1       |         1   
------------------------------------------------------------------

So .example a:link

is equal 10+1+10 = 21

and a:hover

equal 1+10=11

.

So after being provided :hover

, the specificity value will be equal, but the last rule will be accepted by css.

+1


source


I think the problem is both the order and the specificity of your hover style. It works:

{
  color: #1EAEDB;
}

.example a:link {
  color: #ff00ff;
}

.example a:hover {
  color: #38ce33;
}
0


source






More articles:


All Articles