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

Это текущий 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;
}