Question

美好的一天！我意识到这个问题已被问过好几次了。我在这里查找了一些线程，但它们似乎不够，所以我决定创建一个新线程。长话短说这是我第二天学习HTML5，CSS3和javascript。我正处于我想用闪亮按钮创建菜单的地步。

这里的情况如下：按钮显示应该如何，当鼠标悬停在它们上面时，颜色不会改变。我将发布完整的源代码。内部有一些注释可以帮助更好地理解代码。

整个源代码：

<!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>

Answer 1

您的悬停样式如下所示：

a.buttonStyle:hover { background: #383; }

因此它专门针对<a>标记设置。改变你的风格

.buttonStyle:hover { background: #383; }

所以你只在特定的类上设置悬停。然后就行了。

有关演示，请参阅此jsFiddle。

Answer 2

您还可以为悬停使用一种色调，因此您可以使用一种着色或变暗的颜色代替新颜色。如果在许多不同颜色的按钮上使用悬停样式，因此仅一种悬停样式，但可以使用任意数目的按钮颜色，则很有用。

.button .style1 {背景：＃383; } .button .style2 {背景：＃555; }

.button：hover {过滤器：亮度（85％）; }

在悬停时更改按钮颜色

2 个答案: