проблема с границей 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;
}

Также, пожалуйста, посмотрите на эту скрипку.

Я не понимаю, почему граница не применяется к первому 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

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

Answer 3

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

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

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

Смотрите обновленную скрипку здесь

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