Custom Link Color Is Being Overridden

Question

I'm having an issue when I set some text to a certain color in my stylesheet, but later on I define a link that has a hover style, that hover style is not showing though. Here's a what I have for my CSS

.parkName{color: #5a712d; font-size:25px;}
a.cardLinkOverlay:link {color: #GERFG4 !important;}
a.cardLinkOverlay:visited {}
a.cardLinkOverlay:active {color: #2495d5 !important;}
a.cardLinkOverlay:hover {color: #2495d5 !important;}

Here is a JSFiddle showing what I have so far: http://jsfiddle.net/rctfan1999/8vr00tzq/2/
If you notice that the word "Yosemite" has a color, but unlike the word "National Park", when you hover over it, it doesn't change colors. Would anybody be able to tell me how to make "Yosemite" change colors on hover?

There is no such color #GERFG4. In hexidecimal, the highest digit is F. Of course you'll still get a color regardless of how inaccurate the code is. http://stackoverflow.com/questions/8318911/why-does-html-think-chucknorris-is-a-color — zer00ne, Nov 21 '15 at 00:13

Marc Audet · Accepted Answer · 2015-11-21T00:14:42.767

The color defined on a.cardLinkOverlay is not applied to .parkName because .parkName is a child element of a.cardLinkOverlay. Therefore, the .parkName rule takes precedence over any inheritance of the color values defined by CSS rules that are applied to the parent element.

The way to fix it is to define a CSS rule that targets the element specifically, in this case, using the selector: a.cardLinkOverlay:hover .parkName.

Note that you can omit the !important qualifier, not needed.

.parkType {
    font-size:15px;
    font-weight:bold;
}
.parkName {
    color: #5a712d;
    font-size:25px;
}
a.cardLinkOverlay:link {
    color: #GERFG4;
}
a.cardLinkOverlay:visited {
}
a.cardLinkOverlay:active {
    color: #2495d5;
}
a.cardLinkOverlay:hover {
    color: #2495d5;
}
a.cardLinkOverlay:hover .parkName {
    color: #2495d5;
}

<a href="http://example.com/page/" class="cardLinkOverlay">
 <div class="cardLink">
  <div class="col-md-2">
    <img src="http://goo.gl/DsstWK" width="170" height="95.5">
     </div>
     
  <div class="col-md-9">
   <div class="parkName">Yosemite</span></div>
   <div class="parkType">National Park</div>
  </div>
  
  <div class="col-md-1">
   <div class="hidden-xs"><span class="glyphicon glyphicon-menu-right"></span></div>
  </div>
 </div>
</a>

AVProgrammer · Answer 2 · 2015-11-21T20:31:11.473

1

Your CSS rules are specific to anchor tags with the class "cardLinkOverlay", and so will not apply to nested anchor tags.

edited Nov 21 '15 at 20:31

answered Nov 21 '15 at 00:06

AVProgrammer

1,344
2
20
40

Custom Link Color Is Being Overridden

2 Answers2