悬停状态颜色更改，Avada 主题，Wordpress答案

【问题标题】：Hover Status Color Change, Avada Theme, Wordpress悬停状态颜色更改，Avada 主题，Wordpress
【发布时间】：2018-12-24 19:01:05
【问题描述】：

我们在 wordpress 网站上使用 Avada 主题：http://skybox.wearetechnology.com/

我们想更改我们网站上链接的悬停状态，现在它们变为白色，而客户要求使用白色背景。

我试图更改 CSS 以反映这一点，但在主题设置的某处，它们将 a:hover 状态编码到嵌入样式表中，最后带有 !important 代码。

我在主题设置中找不到允许更改悬停状态颜色的任何位置（即使您可以更改几乎任何其他颜色）。

有没有办法覆盖代码，以便我可以将颜色改回更明显的颜色？

现在我正在使用文字阴影和描边，但看起来不太好。

【问题讨论】：

最近新闻下可以看到首页页脚的链接。

标签： css wordpress textcolor

【解决方案1】：

如果您制作的 CSS 选择器比带有 !important 注释的选择器更具体，您应该能够覆盖悬停颜色，只要您包含自己的 !important 注释。

例如，这个：

.featured-post a:hover {
    background-color: pink !important;
}

将覆盖这个：

a:hover {
    background-color: #ffffff !important;
}

这里是a simple JSFiddle demo。在演示中，由于具有更具体的选择器，第二个链接的样式会覆盖第一个链接上的 !important 注释。

【讨论】：

【解决方案2】：

没关系，我发现在 Avada 主题中，在主题选项下的后端有一个地方可以添加覆盖任何主题 CSS 的自定义代码。

【讨论】：

【解决方案3】：

这是我必须在 Avada 自定义 css 中添加的 CSS，以移除 Avada 4.0.1 中的悬停状态颜色：

/* Undoes very specific css with an important clause from the author of the   theme */
.fusion-content-boxes-1 .fusion-content-box-hover .link-area-link-icon-hover     .heading h2, body .fusion-content-boxes-1 .fusion-content-box-hover .link-area-  link-icon-hover .heading .heading-link h2, body .fusion-content-boxes-1 .fusion-   content-box-hover .link-area-box-hover .heading h2, body .fusion-content-boxes-1 .fusion-content-box-hover .link-area-box-hover .heading .heading-link h2, body .fusion-content-boxes-1 .fusion-content-box-hover .link-area-link-icon-hover.link-area-box .fusion-read-more, body .fusion-content-boxes-1 .fusion-content-box-hover .link-area-link-icon-hover.link-area-box .fusion-read-more::after, body .fusion-content-boxes-1 .fusion-content-box-hover .link-area-link-icon-hover.link-area-box .fusion-read-more::before, body .fusion-content-boxes-1 .fusion-content-box-hover .fusion-read-more:hover:after, body .fusion-content-boxes-1 .fusion-content-box-hover .fusion-read-more:hover:before, body .fusion-content-boxes-1 .fusion-content-box-hover .fusion-read-more:hover, body .fusion-content-boxes-1 .fusion-content-box-hover .link-area-box-hover.link-area-box .fusion-read-more, body .fusion-content-boxes-1 .fusion-content-box-hover .link-area-box-hover.link-area-box .fusion-read-more::after, body .fusion-content-boxes-1 .fusion-content-box-hover .link-area-box-hover.link-area-box .fusion-read-more::before, body .fusion-content-boxes-1 .fusion-content-box-hover .link-area-link-icon-hover .icon .circle-no, body .fusion-content-boxes-1 .fusion-content-box-hover .link-area-box-  hover .icon .circle-no {
    color: black !important;
}

【讨论】：