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 {
这有一个大写字母B lBox.
然后看看这个：
section#lbox:hover {
这在 lbox 中有一个小写b。
假设你的盒子有一个id="lBox"，悬停opacity: 0.8部分将不起作用，因为CSS区分大小写，lbox和lBox是两个不同的东西。
所以你应该做的是改变这个：
section#lbox:hover {
对此：
section#lBox:hover {
它应该有效。