我的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。
答案 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;
}
答案 1 :(得分:1)
尝试编写#first:hover CSS as:
#first:hover{
border-color:#000;
border-width:5px;
border-style:solid;
height:90px;
width:90px;
}
您的边框正在显示,但没有调整高度和宽度以增加边框的厚度,看起来它没有正确应用它。
答案 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;
}