Here is the code I have for a tab that can be selected:
<div class="tabOff">
<div class="lightCorner TL"></div><div class="lightCorner TR"></div>
<div class="cornerBoxInner">
<p>My Tab</p>
</div>
</div>
When the mouse hovers over tabOff, the background color changes using the following CSS:
.tabOff:hover
{
background:#AAA;
color:#CDEB8B;
}
I am wondering if there is a way to change the background image for the classes "lightCorner TL" and "lightCorner TR" without using JavaScript, when tabOff is hovered.
These are the current CSS styles for lightCorner TL and 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;
}