Question

考虑一个矩形div，它被分成两部分，每个部分是L形（如下图所示），左边L区域1，右边L区域2。

我想悬停，更改背景颜色，例如鼠标悬停的区域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。

悬停一个分裂的矩形div

2 个答案: