html - 在悬停时更改子项的 CSS 可以在 firefox 或 chrome 中使用

Question

我制作了一个框，我想在悬停时更改它，我想更改背景颜色和文本的颜色并图标它:

<div class="col-xs-12 col-sm-8 col-sm-offset-2 col-md-offset-0 col-md-4 col-lg-4">
	<div class="FDCboxHepContainerDIV schmuckBorder">
		<div class="FDCboxHepDIV">
			<i class="fa fa-file-text-o FDCboxHepIcon schmuckFarbe"></i>
			<h3 class="text-uppercase FDCboxHepH3 schmuckFarbe">PRODUCT FOLDER</h3>
			<p class="FDCboxHepp">Download our product folder with more details on ArdenSuite's features and functionalities.</p>
			<a target="_blank" type="button" class="btn btn-borders btn-primary FDCboxHepA">DOWNLOAD</a>
		</div>
	</div>
</div>

看起来像这样:

我希望框在悬停时发生变化。我希望它有 bordercolor 作为背景和白色的所有文本和图标。我已经找到了一种适用于 firefox 和一种适用于 chrome 的方法。但如果我同时添加两者，则只有 firefox 有效而 chrome 无效。

这是 firefox 版本:

/*Firefox*/
.FDCboxHepContainerDIV:hover .FDCboxHepIcon{
	color:white !important; 
}

这是 Chrome 版本:

/*Chrome*/
.FDCboxHepContainerDIV:hover > .FDCboxHepIcon{
	color:white !important; 
}

有谁知道在这两种浏览器(最好是所有浏览器)中都可以使用的方法。此框的 CSS 分布在不同的 css 文件中，相互覆盖。

Answer 1

我设法弄清楚了。显然 Chrome 有一些问题，背景颜色是 rgba 而没有不透明度值。一旦我拿走“a”，它就起作用了。我目前有一个紧迫的计划，但我可能会回到这个并进行更多实验。