Html 悬停时更改按钮颜色
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/17219109/
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
Changing button color on hover
提问by Stanimirovv
Good day! I realise that this question has been asked several times. I looked up some threads here but they didn't seem to be enough so I decided to create a new thread. Long story short this is my second day learning HTML5, CSS3 and javascript. I am at the point where I want to create menus with shiny buttons.
再会！我意识到这个问题已经被问过好几次了。我在这里查找了一些线程，但它们似乎还不够，所以我决定创建一个新线程。长话短说，这是我学习 HTML5、CSS3 和 javascript 的第二天。我现在想创建带有闪亮按钮的菜单。
The case here is the following: The buttons show as they should, howver when the mouse hovers over them the color isn't changed. I will post the entire source code. There are a few comments inside to help understand the code better.
这里的情况如下：按钮显示为它们应有的样子，但是当鼠标悬停在它们上面时，颜色不会改变。我将发布整个源代码。里面有一些注释可以帮助更好地理解代码。
The entire source code:
整个源代码：
<!DOCTYPE html>
<html lang="en" xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta charset="utf-8" />
<style>
ul {
list-style: none;
margin: 40px 0;
}
li {
float : left;
}
/*This will style the buttons*/
.buttonStyle {
width : 60px;
height : 20px;
-moz-border-radius: 2px;
-webkit-border-radius: 2px;
}
/*This should make them change their color when they are hovered*/
a.buttonStyle:hover {
background: #383;
}
</style>
</head>
<body>
<!-- custom made list to store the buttons-->
<ul >
<!-- Just some buttons to make it look like a menu-->
<li><input type="button" class="buttonStyle" /></li>
<li><input type="button" class="buttonStyle"/></li>
<li><input type="button" class="buttonStyle"/></li>
<li><input type="button" class="buttonStyle"/></li>
<li><input type="button" class="buttonStyle"/></li>
</ul>
</body>
</html>
回答by Ryan
Your hover style looks like this:
您的悬停样式如下所示：
a.buttonStyle:hover { background: #383; }
So it is set specifically for a <a>tag. Change your style to be
所以它是专门为一个<a>标签设置的。改变你的风格
.buttonStyle:hover { background: #383; }
So you set the hover only on the specific class. Then it works.
所以你只在特定的类上设置悬停。然后它起作用了。
See this jsFiddlefor a demo.
有关演示，请参阅此jsFiddle。
回答by char
You could also use a tint for the hover, so instead of a new colour you would have a tinted or darken version of the colour. This is useful if using the hover style across a number of different coloured buttons hence only one hover style but any number of button colours.
您还可以为悬停使用色调，因此您将拥有该颜色的着色或变暗版本，而不是新颜色。如果在多个不同颜色的按钮上使用悬停样式，因此只有一种悬停样式但任意数量的按钮颜色，这将非常有用。
.button .style1 { background: #383; } .button .style2 { background: #555; }
.button .style1 { 背景：#383; } .button .style2 { 背景：#555; }
.button:hover { filter: brightness(85%); }
.button：悬停{过滤器：亮度（85％）；}
