2009-08-24 143 views
1

更改子类的背景图像我有一个可选择的选项卡下面的代码: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; 
} 

有什么办法,我可以改变我的班“lightCorner TL”和“lightCorner TR”使用不同的背景图片,没有JavaScript,当tabOff悬停

这是对于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; 
} 

回答

6

我从来没有尝试过,但我会先从:

.tabOff:hover .lightCorner { 
} 

鸵鸟政策知道这是正确的用法虽然。

+0

这对于一开始很有效,但我需要分别控制TL和TR角。谢谢! – GenericTypeTea 2009-08-24 16:19:07

+0

报废,得到它与您的示例一起工作,只需用.TR替换.lightCorner! – GenericTypeTea 2009-08-24 16:19:51

+0

好吧,只需使用.tabOff:hover.TR {}和.tabOff:hover .TL {}进行尝试,以上只是一个示例。 – jeroen 2009-08-24 16:20:28

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