html - HTML 中单个 href 链接中的多种样式

标签 html css

我想要一个既有普通字体又有粗体字体的链接。像这样:

[示例链接]

当我将鼠标悬停在链接的任何部分时,我希望整个链接文本的颜色都发生变化。我试过:

a:visited { color: #000000; }
a:hover { color: #808080; }

<a href="image.png">sample <strong>link</strong></a>

但是,问题是当我将鼠标悬停在它上面时,粗体部分不会改变颜色并保持黑色而不是变成灰色。我尝试使用带有指定悬停颜色而不是强标记的 css 类的跨度。虽然这适用于粗体文本,但只要鼠标悬停在链接的非粗体部分上,它就不会改变颜色。

解决这个问题的正确方法是什么? 谢谢。

编辑:问题是我有 * { color: #000000; } 在 css 中。

最佳答案

它适用于整个链接文本。

清除浏览器历史记录
https://jsfiddle.net/elouanesbg/gefhcd0a/3/

a:visited { color: #000000; }
a:hover { color: #808080; }
<a href="image.png" >sample <strong >link</strong></a>

关于html - HTML 中单个 href 链接中的多种样式,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/59233671/

相关文章:

css - SVG 进度条

javascript - less 1.4 string.trim() ie8 崩溃

javascript - 如何在图表(chartJS)中添加长度条的背景颜色?

html - 在 wordpress 中添加帖子时,帖子出现在页面顶部而不是我想要的内容下方

javascript - 如何阻止chrome缓存

javascript - 如何将数据从 Vue 实例传递到单个文件组件

jquery - 使用 jQuery 将鼠标悬停在同一组中的一个 div 上时,如何隐藏所有其他 div?

Css div 窗口在 div 窗口的中心

javascript - 如何使 th 的宽度等于另一个 bootstrap-table 中的每个对应的 th

css - 如何在 React UI 语义中设置样式、对齐内容