html - CSS边框问题

Question

我的HTML如下:

<div id="top">
<div id="first">
</div>
<div id="second">
</div>
<div id="third">
</div>
</div>
​

我的 CSS 如下:

#first{
    position: absolute;
    left:100px;
    top:100px;
    height:100px;
    width:100px;
    background-color:red;
}
#second{
    position: absolute;
    left:200px;
    top:100px;
    height:100px;
    width:100px;
    background-color:green;
}
#third{
    position: absolute;
    left:100px;
    top:200px;
    height:100px;
    width:200px;
    background-color:yellow;
}

#first:hover{
    border-color:"000";
    border-width:5px;
    border-style:solid;
}

另请查看this fiddle 。

我不明白为什么边框没有应用到第一个 div。

Answer 1

您的 border 正在工作，但隐藏在其他 div 的 后面，您将 hover 放在它上面。您可以为此使用 box-sizing 属性。

这样写:

#first{
    position: absolute;
    left:100px;
    top:100px;
    height:100px;
    width:100px;
    background-color:red;
    -moz-box-sizing:border-box;
    -webkit-box-sizing:border-box;
    box-sizing:border-box;
}

检查这个http://jsfiddle.net/Q5zt2/6/