更改div的背景颜色

Question

更改div的背景颜色

我目前拥有的代码是:

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

Run Code Online (Sandbox Code Playgroud)

但问题是,每当我将鼠标悬停在div上时,框的背景颜色都不会变为红色.

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

我目前的HTML是:

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

Run Code Online (Sandbox Code Playgroud)

Answer 1

Jos*_*ier 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;
}

Run Code Online (Sandbox Code Playgroud)

另外,在F12开发工具中查看这些错误总是有帮助的.

谢谢!我认为它与语法有关.语法有时会很烦人. (2认同)

归档时间：	12 年，3 月前
查看次数：	5687 次
最近记录：	12 年，3 月前