CSS转换不起作用

时间:2014-11-18 07:56:36

标签: html css css-transitions stylesheet transitions

section#lBox{
background-color: rgb(168, 0, 0);
border: 1px solid rgba(0,0,0,.15);
border-radius: 0px;
box-shadow: 0 1px 0 rgba(255,255,255,0.2) inset, 0 0 4px rgba(0,0,0,0.2);
margin: 100px auto; /*aligns center*/
padding: 24px;
width: 500px;
opacity: 0.5; 

-webkit-transition: all 5s linear;
 transition: background-color 5s;
-moz-transition: all 5s linear;


}

section#lbox:hover {
/*background-color: rgba(168, 0, 0, 0.8);
box-shadow: 0px 0px 500px; */
opacity: 0.8; 
}

我一直在尝试修复它半小时,似乎无法找到转换无效的原因。当鼠标光标在它上面时,它应该使半透明盒子更加不透明。

1 个答案:

答案 0 :(得分:1)

看看这个:

section#lBox {

B中有大写字母lBox

然后看看:

section#lbox:hover {

b中有一个小写的lbox

假设您的邮箱有id="lBox",则悬停opacity: 0.8部分将无效,因为CSS区分大小写,lboxlBox是两个不同的东西。

所以你应该做的只是改变这个:

section#lbox:hover {

对此:

section#lBox:hover {

它应该有用。