Question

我正在使用wordpress创建一个网站（使用2017主题）。我添加了以下HTML添加了一个链接：

<a href="www." target="_blank"><span style="color: #0000ff;">text</span></a>

然后我不得不通过添加这个CSS来删除Wordpress下划线：

.entry-content a, .entry-summary a, .taxonomy-description a, .logged-in-as a, .comment-content a, .pingback .comment-body > a, .textwidget a, .entry-footer a:hover, .site-info a:hover {
   box-shadow: 0px 0px 0px 0px !important;
}

我的下一个目标是当有人将鼠标悬停在其上时，超文本会改变颜色，到目前为止，我已经在CSS中完成了这项工作：

a:hover {
    color: black;
    background-color: transparent;
}

问题是;背景颜色最初为#def，并且在悬停时有效，但文字颜色保持蓝色#0000ff。我尝试向其中添加!important，我甚至尝试将其设为红色#FF0000。

我甚至回到html中删除文本的颜色以查看它是否优先使用蓝色html而不是红色CSS，但是当我将鼠标悬停在原始黑色文本时，即使是纯黑色文本也不会变为红色它

我错过了什么吗？

Answer 1

您必须更改跨度颜色，因为您有一个强制跨度颜色的内联样式或删除它并仅使用CSS。

示例：

＆＃13;

.entry-content a, .entry-summary a, .taxonomy-description a, .logged-in-as a, .comment-content a, .pingback .comment-body > a, .textwidget a, .entry-footer a:hover, .site-info a:hover {
   box-shadow: 0px 0px 0px 0px !important;
}

a:hover, a:hover span {
    color: black !important;
    background-color: transparent;
}

＆＃13;

<a href="www." target="_blank"><span style="color: #0000ff;">text</span></a>

＆＃13;

Answer 2

试试这个：

请删除范围style="color: #0000ff;"

然后您可以添加 span：hover

span:hover {
    color: black;
    background-color: transparent;
}

Demo here

Answer 3

这是因为这条线。

<a href="www." target="_blank"><span style="color: #0000ff;">text</span></a>

内联样式在css文件中获得比css更高的优先级。请尝试添加此项

HTML

<a href="www." target="_blank"><span>text</span></a>

CSS

span{color:#0000FF}

a：悬停不能正常工作

3 个答案: