悬停时链接文本颜色答案

【问题标题】：Link text color on hover悬停时链接文本颜色
【发布时间】：2023-04-10 10:58:03
【问题描述】：

我有一个问题，基本上我想这样做

.buttonar {
    background-color: #4CAF50; /* Green */
    border: none;
    color: #FFF;
    padding: 16px 32px;
    text-align: center;
    text-decoration: none;
    display: inline-block;
    font-size: 16px;
    margin: 4px 2px;
    -webkit-transition-duration: 0.4s; /* Safari */
    transition-duration: 0.4s;
    cursor: pointer;
}

.button2 {
    background-color: #008CBA;
    color: white;
    border: 2px solid #008CBA;
}

.button2:hover {
    background-color: white;
    color: black;
}

&lt;a class="buttonar button2" href="http://www.facebook.com" target="_blank" rel="alternate"&gt;button&lt;/a&gt;

但问题是，我的网站已经有一个template.css（Joomla 网站），其中已经设置了 a、a:link、a:hover 等的样式。我希望我的按钮与代码 sn-p 输出上的完全一样，但我似乎无法让它工作，因为链接保持蓝色（（几乎不可见）由模板设置），或者当我将鼠标悬停在链接本身上时它只会改变颜色不是按钮（为 a:link 和 a:hover 创建了另一个类）。

谁能帮帮我？

【问题讨论】：

标签： html css hyperlink hover

【解决方案1】：

CSS 中的“C”代表层叠。这意味着 CSS 将查看顶部的项目，然后随着它在工作表中向下移动，它将覆盖它们。

这也适用于您将文件放入 HTMl 的方式：

HTML

<head>
    <!-- Insert Joomla CSS here -->
    <!-- Insert your custom CSS here -->
</head>

这将首先应用 Joomla CSS，然后您的自定义样式会覆盖它。

第二次阅读...

...如果您只讨论样式，.button2 会选择 HTML 中具有 class="button2" 的元素。只需在 HTML 中将该类添加到您想要设置样式的按钮中即可。

【讨论】：

我的网站上有相同的代码，但按钮中的文本/链接没有设置样式，它看起来像网站上的所有其他链接，而不是白色和悬停黑色。

【解决方案2】：

你可以在按钮中内联你的样式，它会优先。

检查this。

【讨论】：

【解决方案3】：

解决方法可能很简单，就像在你的 CSS 中添加一个 !important 一样简单。这会劫持级联规则，并应覆盖您的 template.css 规则。

此外，请确保无论您将自己的 css 规则放在何处，都应将其放置在您的页面上调用 template.css 之后。将它放在头部标签中的任何位置可能还不够。我会首先找出调用 template.css 的位置（通常在链接标签中），然后在其后放置一个 !important 标记您自己的 css。

有关此信息：https://css-tricks.com/when-using-important-is-the-right-choice/

宋

【讨论】：