悬停分割矩形div

Question

考虑一个矩形div，它被分成2部分，每个部分为L形（如下所示），区域1为左侧L，区域2为右侧L.

我想悬停，改变背景颜色，例如，区域1鼠标悬停，区域2相同。有没有办法用CSS（不使用JavaScript）做到这一点？

____ ___ 
| __| | 
|_|_____| 

Answer 1

小提琴：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; 
} 

Answer 2

这很有趣..

http://jsfiddle.net/aaVKZ/1/

诀窍是矩形的每一半实际上是由两个div秒。然后，每对div包含在共同的父亲中。该父母已应用:hover。