проблема с CSS границы

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

Это из-за способа модель коробки работает в CSS ... если уменьшить окно на парении, как показано на this updated jsFiddle, он будет работать так, как я полагаю, вы ожидали.

Answer 2

ваш 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 3

Попробуйте написать свой #First: парить CSS как:

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

Ваша граница показывает, но без регулировки высоты и ширины для добавленной толщины границы он выглядит так, как будто он не применяет его должным образом.

Смотрите ваши updated fiddle here

Answer 4

Граница применяется при наведении курсора мыши, как это то, что вы сказали в CSS

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

изменить его к этому, если вы хотите, чтобы граница появляются всегда ...

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

Answer 5

Использование z-index: 1 property in first: hover будет работать