如何添加 CSS 以在悬停时更改颜色答案

【问题标题】：How to add CSS to change colour on hover如何添加 CSS 以在悬停时更改颜色
【发布时间】：2022-02-11 19:14:27
【问题描述】：

我正在尝试创建一个带有文本的按钮。我希望当您将鼠标悬停在框上时，框的颜色变为白色，文本的颜色变为蓝色。

如何添加 css 以使我的文本和框在悬停时改变颜色？

已编辑：我从正在编辑的网站模板的另一部分获得了 html sn-p。它基本上是一个完全符合我上面概述的盒子。然后我将它放在菜单 html 的列表标记中，希望它只是转移功能，但它没有工作。所以我尝试添加 [hover:] 但它仍然无法正常工作。

我知道我做错了什么，但我不知道它是什么。

代码 sn-p 用于 html：

上传资源

【问题讨论】：

标签： html css

【解决方案1】：

使用:hover 伪选择器

例如

button {
    color: white;
    background: blue;
}

button:hover {
    color: blue;
    background: white;
}

当然，替换为您需要的实际十六进制代码而不是上面的颜色名称，并且可以使用任何有效的属性，例如border、text-decoration等

【讨论】：

【解决方案2】：

使用:hover伪选择器

element{
    color: white;
    background: blue;
}

element:hover{
    color: blue;
    background: white;
}

你可以在Click Here查看这些

【讨论】：