CSS - Изменение подклассов фонового изображения при наведении курсора мыши

Question

У меня есть следующий код для вкладки выбираемой:

<div class="tabOff"> 
    <div class="lightCorner TL"></div><div class="lightCorner TR"></div> 
    <div class="cornerBoxInner"> 
     <p>My Tab</p> 
    </div> 
</div> 

На мыши над из tabOff У меня есть следующие CSS для изменения цвета фона:

.tabOff:hover 
{ 
    background:#AAA; 
    color:#CDEB8B; 
} 

есть ли способ, что я могу изменить свои классы «lightCorner TL» и «lightCorner TR» использовать другое изображение фона, без JavaScript, когда tabOff наведен

Это Curre нт CSS для lightCorner TL и TR:

.lightCorner 
{ 
    background:url(../Images/LightCorner.gif) no-repeat; 
} 
.TL 
{ 
    top:0px; 
    left:0px; 
    background-position:0px 0px; 
} 
.TR 
{ 
    top:0px; 
    right:0px; 
    background-position:-13px 0px; 
} 

Answer 1

Я никогда не пробовал, но я хотел бы начать с:

.tabOff:hover .lightCorner { 
} 

не знаю, если это правильное использование, хотя.

Answer 2

.tabOff:hover div.lightCorner { 
    background:url(../Images/LightCorner.gif) no-repeat; 
} 
.tabOff:hover div.TL { 
    top:0px; 
    left:0px; 
    background-position:0px 0px; 
} 
.tabOff:hover div.TR { 
    top:0px; 
    right:0px; 
    background-position:-13px 0px; 
}