我制作了一个框,我想在悬停时更改它,我想更改背景颜色和文本的颜色并图标它:
<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 文件中,相互覆盖。
最佳答案
我设法弄清楚了。显然 Chrome 有一些问题,背景颜色是 rgba 而没有不透明度值。一旦我拿走“a”,它就起作用了。我目前有一个紧迫的计划,但我可能会回到这个并进行更多实验。
关于html - 在悬停时更改子项的 CSS 可以在 firefox 或 chrome 中使用,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/47080484/