Question

我目前拥有的代码是：

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

Answer 1

语法错误 - 您忘记关闭.button2 {}

jsFiddle example - 现在可以使用了

更新了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开发工具中查看这些错误总是有帮助的。

更改div的背景颜色

1 个答案: