Переход CSS не работает

Question

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

Я пытался исправить его в течение получаса и, похоже, не нашел, почему переход не работает. Предполагается, что полупрозрачная коробка становится более непрозрачной, когда курсор мыши над ней.

Answer 1

Посмотрите на это:

section#lBox { 

То есть заглавная буква B в lBox.

Тогда посмотрите на это:

section#lbox:hover { 

Это в lbox строчную b.

Предполагая, что ваш ящик имеет id="lBox", парение opacity: 0.8 часть не будет работать, так как CSS чувствительны к регистру, и lboxlBox и две разных вещи.

Так что вы должны сделать, это просто изменить:

section#lbox:hover { 

к этому:

section#lBox:hover { 

И он должен работать.