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

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

Answer 1

您的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/

Answer 2

尝试编写#first：hover CSS as：

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

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

查看您的updated fiddle here

Answer 3

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

Answer 4

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

Answer 5

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

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

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

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

CSS边框问题

5 个答案: