将鼠标悬停在按钮上时文本颜色更改答案

【问题标题】：Text color change on hover over button将鼠标悬停在按钮上时文本颜色更改
【发布时间】：2012-08-21 19:08:12
【问题描述】：

我正在尝试更改悬停按钮内文本的颜色。

我可以让按钮本身改变颜色，但我希望按钮文本也改变颜色。

这是我当前的 css：

button,
input.button,
a.button,
input[type="submit"] {
background:#2e77ae;
background: -moz-linear-gradient(top, #5590bd, #2e77ae);
background: -webkit-linear-gradient(top, #5590bd, #2e77ae);
background: -o-linear-gradient(top, #5590bd, #2e77ae);
background: -ms-linear-gradient(top, #5590bd, #2e77ae);
background: linear-gradient(top, #5590bd, #2e77ae);
border-color:#2e77ae;}

button:hover,
input.button:hover,
a.button:hover,
input[type="submit"]:hover{

    background:#E6D332;
    background: -moz-linear-gradient(top, #E6D332, #E6D332);
    background: -webkit-linear-gradient(top, #E6D332, #E6D332);
    background: -ms-linear-gradient(top, #E6D332, #E6D332);
    background: linear-gradient(top, #E6D332, #E6D332);
    border-color:#2e77ae;}



button:focus,
input.button:focus,
a.button:focus,
input[type="submit"]:focus { 
    background-color:#E6D332;}

【问题讨论】：

更改文字颜色使用color:#color;
要更改文本颜色，您需要添加此color:#455667

标签： css text colors hover

【解决方案1】：

.btn:hover h3{
    color: #FFFFFF;
}

您可以在.btn:hover 之后为<button> 中的元素（例如文本）编写选择器，以便在将鼠标悬停在按钮上时更新这些特定元素的css 属性。

【讨论】：

【解决方案2】：

p.one{
    color: DarkBlue}
p.one:hover{
    color: yellow}

<html>
    <head>
        <title>Css Help</title>
    <head>
    <body>
        <p class="one">Example TextExample TextExample TextExample TextExample TextExample TextExample TextExample TextExample TextExample TextExample TextExample TextExample TextExample TextExample TextExample TextExample TextExample Text<p>
    </body>
<html>

这是我的工作：

a:hover{
    color: #ffffff;
}

您可以将“a”更改为诸如段落“p”之类的任何内容，或者将其指定为带有类的 html 文件

<p class="one">Example</p>

它们在 CSS 文件中的作用：

p.one:hover{
    color: #ffffff;
}

希望能帮上忙。

【讨论】：

【解决方案3】：

CSS 属性color 一般控制元素中的文本颜色。在您的情况下，要更改悬停时的颜色，请使用 :hover 说明符；

input[type = "submit"]:hover {
    color: #FF0000;
    //you can add more styles to be applied on hover
}

请注意，您也可以使用rgb(x, y, z) 格式指定颜色。这里有一个小演示来说明：little link。您可以在此处试用演示并查看源代码：another little link。

希望对你有所帮助！

【讨论】：

感谢您的帮助 - 它仍然不起作用 - 我做错了什么：按钮：悬停，输入按钮：悬停，a.button：悬停，输入[type =“提交”] ：悬停{ 背景：#E6D332;背景：-moz-线性渐变（顶部，#E6D332，#E6D332）；背景：-webkit-linear-gradient（顶部，#E6D332，#E6D332）；背景：-ms-线性梯度（顶部，#E6D332，#E6D332）；背景：线性渐变（顶部，#E6D332，#E6D332）；边框颜色：#2e77ae；颜色：#2e77ae;}
@StephenO'connor 请看一下这个：little link。这使用了相同的代码，并且适用于 hover。
谢谢 - 由于某种原因它无法在我的页面上运行 - 我不知道为什么，但感谢您的帮助 @Abody97
@StephenO'connor 您的页面上线了吗？你能提供一个链接吗？如果没有，您能否发布您的完整 HTML/CSS？
@StephenO'connor 这是因为你有一个规则：color: rgb(255, 255, 255) !important; 删除 !important 部分，它会工作。

【解决方案4】：

color:#(insert text color)把这个放进去

【讨论】：

在悬停部分input[type="submit"]:hover{ background:#E6D332; background: -moz-linear-gradient(top, #E6D332, #E6D332); background: -webkit-linear-gradient(top, #E6D332, #E6D332); background: -ms-linear-gradient(top, #E6D332, #E6D332); background: linear-gradient(top, #E6D332, #E6D332); border-color:#2e77ae; color:#(insert text color)}
@StephenO'connor 我认为您应该使用大写字母。所以#2E77AE，而不是#2e77ae
#2e77ae 或 #2E77AE 是否重要，

【解决方案5】：

如果你想改变文本的颜色，使用 CSS color 属性，比如

input[type="submit"]:hover{
   color :#E6D332; 
}

【讨论】：