当我在样式表中将某些文本设置为某种颜色时遇到问题,但稍后我定义了一个具有悬停样式的链接,但该悬停样式并未显示。这是我的 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/
如果您注意到“优胜美地”这个词有颜色,但与“国家公园”这个词不同,当您将鼠标悬停在它上面时,它不会改变颜色。有人能告诉我如何让“优胜美地”在悬停时改变颜色吗?

最佳答案

a.cardLinkOverlay 上定义的颜色不适用于 .parkName,因为 .parkNamea.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>

关于html - 自定义链接颜色被覆盖,我们在Stack Overflow上找到一个类似的问题:https://stackoverflow.com/questions/33838037/

10-14 14:34
查看更多