改变悬停的按钮颜色

美好的一天！我意识到这个问题已被多次提出。我在这里查了一些线程，但他们似乎不够，所以我决定创建一个新的线程。长话短说这是我第二天学习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>

来源

2013-06-20 Bloodcount

你hover样式看起来是这样的：

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

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

.buttonStyle:hover { background: #383; }

因此，你设置悬停只在特定的类。然后它工作。

查看此jsFiddle的演示。

来源

2013-06-20 16:42:16 Ryan

这解决了我的问题，谢谢！当计时器让我的时候，我会设置这个答案。再次感谢！ – Bloodcount

@Bloodcount从边框半径中移除供应商前缀。他们不再支持。所以'-moz-border-radius' - >'border-radius'。 –

会不会，谢谢！ – Bloodcount

改变悬停的按钮颜色

回答

相关问题