Question

Think about a rectangular div, which is split into 2 parts, each part is L shaped (like shown below), region 1 for left-side L and region 2 for right-side L.

I would like to hover, change the background color for example, region 1 on mouse-over, same for region 2. Is there any way to do it with CSS (without using javascript) ?

 ____ ___
|  __|  |
|_|_____|

Answer 1

Fiddle: http://jsfiddle.net/nts32/

html

<div id="left">
    <div></div>
</div>
<div id="right">   
    <div></div>
</div>

css

#left, #right {
    height:300px;
    width:150px;
    position:absolute;
}

#left > div, #right >div {
    height:150px;
    width:150px;
    position:absolute; 
}

#left, #left > div {    
    background-color:#cef;  
}

#right, #right > div {  
    background-color:#fec;
    left:300px;  
}

#left > div {
    left:150px;   
}

#right > div {
    left:-150px;
    top:150px;  
}

#left:hover, #left:hover > div {
    background-color:#acd;   
}

#right:hover, #right:hover > div {
    background-color:#dca;   
}