CODEWITHSUNDEEP
htmlcssborder
hrishikeshp19
hrishikeshp19

Reputation: 9028

issue with CSS border

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.

Upvotes: 0

Views: 69

Answers (5)

Prabhavith
Prabhavith

Reputation: 486

Use z-index:1 property in first:hover it will work

Upvotes: 0

neo108
neo108

Reputation: 5246

The border is applied on hover as that is what you have said in the CSS

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

Change it to this if you want the border to appear always...

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

Upvotes: -1

ar3
ar3

Reputation: 4063

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.

Upvotes: 1

nybbler
nybbler

Reputation: 4841

Try writing your #first:hover CSS as: 

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

Your border is showing but without adjusting the height and width for the added thickness of the border it looks like it isn't applying it properly.

See your updated fiddle here

Upvotes: 1

sandeep
sandeep

Reputation: 92793

your border is working but hide behind other div's where you hover over it. You can use box-sizing property for this.

Write like this:

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

Check this http://jsfiddle.net/Q5zt2/6/

Upvotes: 3

Related Questions