logo标签列表

当鼠标悬停在按钮上时，文本颜色变化

csstextcolorshover
9

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

我可以使按钮本身更改颜色，但是我也想要按钮文本更改颜色。

这是我的当前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;。 - user1317647
要更改文本颜色，您需要添加此color：＃455667。 - Uttara
5个回答
7
CSS属性color通常用于控制元素中的文本颜色。如果你想在鼠标悬停时更改颜色，可以使用:hover选择器。
input[type = "submit"]:hover {
    color: #FF0000;
    //you can add more styles to be applied on hover
}

注意，你也可以使用 rgb(x, y, z) 格式指定颜色。这里有一个小演示来说明：链接。你可以在演示中玩耍并查看源代码：另一个链接。
希望这能帮到你！
感谢您的帮助 - 它仍然不起作用 - 我做错了什么吗： 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; color :#2e77ae;} - Stephen O'connor
@StephenO'connor 请看一下这个：小链接。它使用了您的相同代码，并且在“hover”上起作用。 - Chris
谢谢 - 不知道为什么它在我的页面上不起作用 - 但是感谢您@Abody97的帮助。 - Stephen O'connor
@StephenO'connor 你的页面已经上线了吗？能否提供一个链接呢？如果没有，能否请您发布完整的HTML/CSS代码？ - Chris
@StephenO'connor 这是因为你有一个规则：color: rgb(255, 255, 255) !important; 删除 !important 部分，它就会起作用。 - Chris
@StephenO'connor 如果它起作用了，请不要忘记将答案“打勾”为已接受！ - Chris
2

如果你想改变文本的颜色，可以使用CSS的color属性，例如：

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

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;
}

希望我能帮到你。

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

您可以编写选择器来选取在 <button> 元素内的元素（例如文本），并将其放置在 .btn:hover 之后，以便在悬停在按钮上时更新这些特定元素的 CSS 属性。

-1

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:#（插入文本颜色）} - Johnzo
@StephenO'connor，我认为你应该使用大写字母。所以应该是#2E77AE，而不是#2e77ae。 - Johnzo
无论是 #2e77ae 还是 #2E77AE，都没有关系。 - Chandrakant
网页内容由stack overflow 提供, 点击上面的
可以查看英文原文，
原文链接