Question

当我在样式表中将某些文本设置为某种颜色时，我遇到了问题，但后来我定义了一个具有悬停样式的链接，但悬停样式却没有显示。这是我的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;}

这是一个JSFiddle显示到目前为止我所拥有的：http://jsfiddle.net/rctfan1999/8vr00tzq/2/
如果你注意到＆＃34; Yosemite＆＃34;有一种颜色，但与＃34;国家公园＆＃34;这个词不同，当你将鼠标悬停在它上面时，它不会改变颜色。有人能告诉我如何制作＆＃34; Yosemite＆＃34;在悬停时改变颜色？

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>

Answer 2

您的CSS规则特定于具有“cardLinkOverlay”类的锚标签，因此不适用于嵌套的锚标签。

自定义链接颜色被覆盖

2 个答案: