HTML中超链接的悬停颜色

Posted 2023-03-24

【中文标题】HTML中超链接的悬停颜色

【英文标题】：Hover colour of hyperlink in HTML

【发布时间】：2017-07-08 14:27:04

【问题描述】：

我想这样当鼠标悬停在我的超链接上时它会改变颜色。就目前而言，它仍然是黑色的，因此很难看出该文本是一个超链接。

这是 html 代码：

&lth4 style="text-align: left;">&lta href="hyperlink" target="_blank">&ltspan style="color: #000000;">#bobthebrewbus的制作&lt/span>&lt/a>&lt/h4 >

【参考方案1】：

您可以添加以下 CSS：

h4 a:hover span 
    color: red !important; // Change the color to your preference.

:hover 指导将锚点悬停在上面时会发生什么。我添加了!important，以便它可以覆盖span 元素中的内联css。如果将内联 CSS 移至外部 CSS，则可能不需要 !important 声明。

【讨论】：

我在一个 wordpress 网站上工作并翻到文本进行编辑，所以它只在 HTML 中。我可以更改为 CSS 还是如何将其转换为 HTML 并添加到代码中？

你需要在样式标签中写CSS，在文档中。伪类（如 :hover）从不引用元素，而是引用任何满足样式表规则条件的元素。

【参考方案2】：

<style type="text/css">
<!--
a:link color: #000000; text-decoration: underline; 
a:active color: #0000ff; text-decoration: underline; 
a:visited color: #008000; text-decoration: underline; 
a:hover color: #ff0000; text-decoration: none; 
-->
</style> 

【参考方案3】：

    a:hover color: red;
    a  color: black; text-decoration: none;

<h4 style="text-align: left;"><a href="hyperlink" target="_blank">The making of #bobthebrewbus</a></h4>