border-collapse; hover

Vaseech · April 9, 2011

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

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

Черпая в очередной раз полезную информации с этого замечательного сайта, наткнулся на стилевое свойство - border callpse и его значение - callpse, что могло послужить замечательным решением одной, недавно возникшей проблемы. Быстро сворганил меню(рис1):

- рис.1

- рис.2

- рис.3

но при наведении на второе(рис.3) и последующие разделы меню, цвет меняет только правая часть рамки, а по логике должна и левая меняться как в первым разделом меню(рис.2), ведь на сайте в разделе характеристики этого свойство написано - "...При этом между ячейками остается только одна граница, одновременно принадлежащая обеим ячейкам".

В чем тут подвох? Заранее спасибо.

Код:

<body>

table#menu {

border:0px solid #000000;

border-collapse:collapse;

}

table#menu td {

padding:0 5px;

border:1px #000000 solid;

border-bottom:none;

border-top:none;

}

table#menu td:hover {

border:#CC0033 solid 1px;

border-bottom:none;

border-top:none;

}

</style>

<tr>

<tr>

</body>

</html>

SelenIT · April 9, 2011

Это называется "конфликт бордеров" и разруливается он по следующим правилам:

Бордеры с 'border-style'='hidden' приоритетнее всех других конфликтующих бордеров.
У бордеров со стилем 'none' минимальный приоритет, любые другие бордеры соседних ячеек их перекрывают.
Если среди конфликтующих бордеров нет 'hidden' и 'none', то более толстые перекрывают более тонких, а бордеры одной толщины, но разного стиля, перекрывают друг друга в таком порядке: 'double', 'solid', 'dashed', 'dotted', 'ridge', 'outset', 'groove', и последним — 'inset'.
Если бордеры различаются только цветом, то стиль для td важнее стиля для tr, тот, в свою очередь — для thead/tbody/tfoot, затем col, colgroup, и последним — стиль table. Если конфликтуют бордеры однотипных элементов, то "побеждают" бордеры, ближайшие к левому краю и к верхнему краю таблицы.

Здесь как раз работает последний пункт...

Sign In

border-collapse; hover

Question

Vaseech

Link to comment

Share on other sites

1 answer to this question

Recommended Posts

SelenIT

Link to comment

Share on other sites

Join the conversation

Обсуждения

Forums

Important Information