CSS 将鼠标悬停在按钮上时文本颜色更改
声明:本页面是StackOverFlow热门问题的中英对照翻译,遵循CC BY-SA 4.0协议,如果您需要使用它,必须同样遵循CC BY-SA许可,注明原文地址和作者信息,同时你必须将它归于原作者(不是我):StackOverFlow
原文地址: http://stackoverflow.com/questions/12139546/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
Text color change on hover over button
提问by Stephen O'connor
I am trying to change the color of the text inside the button on hover.
我试图在悬停时更改按钮内文本的颜色。
I can make the button itself change color, but I want the button text to change color too.
我可以让按钮本身改变颜色,但我希望按钮文本也改变颜色。
Here is my current css:
这是我当前的 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;}
采纳答案by Chris
The CSS property color
controls the text color in elements generically. In your case, to change the color on hover, use the :hover
specifier;
CSS 属性一般color
控制元素中的文本颜色。在您的情况下,要更改悬停时的颜色,请使用说明:hover
符;
input[type = "submit"]:hover {
color: #FF0000;
//you can add more styles to be applied on hover
}
Note that you can as well specify the color using the rgb(x, y, z)
format. Here's a little demo to illustrate: little link. You can play around with the demo and view the source here: another little link.
请注意,您也可以使用rgb(x, y, z)
格式指定颜色。这里有一个小演示来说明:little link。您可以试用演示并在此处查看源代码:另一个小链接。
I hope that helped!
我希望有帮助!
回答by SexyBeast
If you want to change the color of the text, use the CSS color
property, like
如果要更改文本的颜色,请使用 CSScolor
属性,例如
input[type="submit"]:hover{
color :#E6D332;
}
回答by Slice and Dice
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>
Here is what I do:
这是我所做的:
a:hover{
color: #ffffff;
}
You can change the 'a' to whatever such as a paragraph 'p' or specify it the html file with a class
您可以将“a”更改为诸如段落“p”之类的任何内容,或将其指定为带有类的 html 文件
<p class="one">Example</p>
Them in CSS file do:
它们在 CSS 文件中执行:
p.one:hover{
color: #ffffff;
}
I hope I could Help.
我希望我能帮上忙。
回答by Johnzo
color:#(insert text color)
Put this in
color:#(insert text color)
把这个放进去