a:hover 不能正常工作答案

【问题标题】：a:hover not working properlya:hover 不能正常工作
【发布时间】：2017-02-06 20:03:41
【问题描述】：

我正在使用 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，但是当我将鼠标悬停在上面时，即使是纯黑色文本也不会变成红色它。

我错过了什么吗？

【问题讨论】：

这似乎是 css 特异性的问题，您的 span 内联样式优先于您的伪元素 :hover
@luciferous 这不是特异性。

标签： html css wordpress

【解决方案1】：

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

例子：

.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;
}

&lt;a href="www." target="_blank"&gt;&lt;span style="color: #0000ff;"&gt;text&lt;/span&gt;&lt;/a&gt;

【讨论】：

【解决方案2】：

试试这个：

请删除跨度style="color: #0000ff;"

然后你可以添加 span:hover

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

Demo here

【讨论】：

【解决方案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}

【讨论】：