Question

My HTML is as follows:

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

My CSS is as follows:

#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;
}

​Also please have a look at this fiddle.

I dont understand why border is not applied to first div.

Answer 1

It is because of the way the box model works in css…if you reduce the box on hover as seen in this updated jsFiddle, it will work how I believe you expected it to.