在hover上改变孩子的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作品和铬没有。

这是firefox版本：

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

这是Chrome版本：

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

有没有人知道这种方法在两者中都有效，最好是所有浏览器。此框的CSS也会围绕不同的css文件进行覆盖。

Answer 1

我设法搞清楚了。显然Chrome有一些问题，背景颜色是没有不透明度值的rgba。我一拿走了＃34; a＆＃34;它工作了。我目前有一个紧张的情节，但我可能会回到这个并尝试更多。