1

我目前拥有的代码是这样的：

.button2 {
margin-left: 10px;
background-color: lightgreen;
width: 180px;
height:100px;
padding: 50px,60px;
color: rgba(20, 15, 30, 0.8);
text-transform: uppercase;
border: 1px solid green ;
font-weight: bold;
font-size: 20px;    
-moz-border-radius: 3px;
-webkit-border-radius: 3px;
-border-radius: 3px;
text-shadow: 0 1px 1px rgba(255, 255, 255, 0.8), 0 -1px 0 rgba(25, 27, 9, 0.9);     
-moz-box-shadow: inset 0 0 3px rgba(255, 255, 255, 0.6), inset 0 1px 2px rgba(255, 255, 255, 0.6), 0 5px 0 #3a79a4, 0 6px 0 #593a11, 0 13px 0 #ccc;
-webkit-box-shadow: inset 0 0 3px rgba(255, 255, 255, 0.6), inset 0 1px 2px rgba(255, 255, 255, 0.6), 0 5px 0 #3a79a4, 0 6px 0 #593a11, 0 13px 0 #ccc;
-box-shadow: inset 0 0 3px rgba(255, 255, 255, 0.6), inset 0 1px 2px rgba(255, 255, 255, 0.6), 0 5px 0 #3a79a4, 0 6px 0 #593a11, 0 13px 0 #ccc;
-webkit-transition: background 0.2s ease-out;

.button2:hover {
background-color:#FF0000;
}

然而，问题是每当我将鼠标悬停在 div 上时，框的背景颜色都不会变为红色。

我怎样才能做到这一点，以便每当我将鼠标悬停在具有类 button2 的 div 上时，它会变为背景颜色红色？格式有问题吗？

我当前的 HTML 是：

<html>
<div class=button2></div>
</html>
4

1 回答 1

6

简单的语法错误 - 你忘了关闭.button2 {}

jsFiddle 示例- 现在可以使用

更新的 CSS

.button2 {
    margin-left: 10px;
    background-color: lightgreen;
    width: 180px;
    height: 100px;
    padding: 50px,60px;
    color: rgba(20, 15, 30, 0.8);
    text-transform: uppercase;
    border: 1px solid green;
    font-weight: bold;
    font-size: 20px;
    -moz-border-radius: 3px;
    -webkit-border-radius: 3px;
    -border-radius: 3px;
    text-shadow: 0 1px 1px rgba(255, 255, 255, 0.8), 0 -1px 0 rgba(25, 27, 9, 0.9);
    -moz-box-shadow: inset 0 0 3px rgba(255, 255, 255, 0.6), inset 0 1px 2px rgba(255, 255, 255, 0.6), 0 5px 0 #3a79a4, 0 6px 0 #593a11, 0 13px 0 #ccc;
    -webkit-box-shadow: inset 0 0 3px rgba(255, 255, 255, 0.6), inset 0 1px 2px rgba(255, 255, 255, 0.6), 0 5px 0 #3a79a4, 0 6px 0 #593a11, 0 13px 0 #ccc;
    -box-shadow: inset 0 0 3px rgba(255, 255, 255, 0.6), inset 0 1px 2px rgba(255, 255, 255, 0.6), 0 5px 0 #3a79a4, 0 6px 0 #593a11, 0 13px 0 #ccc;
    -webkit-transition: background 0.2s ease-out;
}

.button2:hover {
    background-color: #FF0000;
}

附带说明一下，在 F12 开发工具中查看这些错误总是有帮助的。

于 2013-11-03T02:07:06.413 回答