CSS边框问题

时间:2012-02-16 04:49:03

标签: html css border

我的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小提琴。

我不明白为什么边框不适用于第一个div。

5 个答案:

答案 0 :(得分:3)

您的border正在运作,但隐藏在div's之上的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/

答案 1 :(得分:1)

尝试编写#first:hover CSS as:

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

您的边框正在显示,但没有调整高度和宽度以增加边框的厚度,看起来它没有正确应用它。

查看您的updated fiddle here

答案 2 :(得分:1)

这是因为盒子模型在css中的工作方式...如果你在this updated jsFiddle中看到的那样减少悬停时的盒子,那么我认为你的预期就会如此。

答案 3 :(得分:0)

首先使用z-index:1属性:悬停它将起作用

答案 4 :(得分:-1)

边框应用于悬停,因为这是您在CSS中所说的

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

如果您希望边框始终显示,请将其更改为

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