[英]CSS transition doesn't work
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;
}
我已经尝试修复了半个小时,但似乎找不到转换为何无法正常进行的原因。 当鼠标光标悬停在透明框上时,应该使它变得更不透明。
看这个:
section#lBox {
在lBox
具有大写字母B
然后看这个:
section#lbox:hover {
在lbox
有一个小写的b
。
假设您的盒子有一个id="lBox"
,则悬停opacity: 0.8
部分将不起作用,因为CSS区分大小写,而lbox
和lBox
是两件事。
因此,您应该做的就是更改此设置:
section#lbox:hover {
对此:
section#lBox:hover {
它应该工作。
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.