CSS - 在悬停时更改子类背景图像

时间:2009-08-24 16:08:55

标签: asp.net css

我有一个可选标签的代码:

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

当tabOff悬停时,有没有什么方法可以改变我的类“lightCorner TL”和“lightCorner TR”来使用不同的背景图像

这是lightCorner TL和TR的当前CSS:

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

2 个答案:

答案 0 :(得分:6)

我从未尝试过,但我会从:

开始
.tabOff:hover .lightCorner {
}

不知道这是否正确使用。

答案 1 :(得分:1)

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