2

再会！我意识到这个问题已经被问过好几次了。我在这里查找了一些线程，但它们似乎还不够，所以我决定创建一个新线程。长话短说，这是我学习 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>
4

2 回答 2

4

您的悬停样式如下所示：

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

所以它是专门为一个<a>标签设置的。改变你的风格

.buttonStyle:hover { background: #383; }

所以你只在特定的类上设置悬停。然后它工作。

有关演示，请参阅此jsFiddle。

于 2013-06-20T16:42:16.163 回答
0

您还可以为悬停使用色调，因此您可以使用颜色的着色或变暗版本，而不是新颜色。如果在多个不同颜色的按钮上使用悬停样式，这很有用，因此只有一种悬停样式但可以使用任意数量的按钮颜色。

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

.button:hover { 过滤器：亮度（85%）；}

于 2018-07-26T07:45:22.510 回答