Custom link color is redefined

Question

I have a problem when I set some text to a specific color in my stylesheet, but later I define a link that has a hover style, this hover style does not show. Here is 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 does not change color. Can anyone tell me how to make Yosemite change colors on hover?

Answer 1

, a.cardLinkOverlay, .parkName, .parkName a.cardLinkOverlay. .parkName , CSS, .

, CSS, , , : a.cardLinkOverlay:hover .parkName.

, !important, .

.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>

Hide result

Answer 2

CSS "cardLinkOverlay" .