Я создал складные ссылки для навигации по моей странице.Все пункты меню в моей навигационной панели (вертикальные, навигационный элемент div с плавающей точкой) также являются собственными элементами div (необходимыми для свертывания).Каждый элемент div оформлен в виде кнопки с текстом.
Я использовал светлый цвет box_shadow с относительно большим радиусом размытия для псевдоэлемента: hover.Теперь, когда я наведите курсор на каждую кнопку / div, похоже, что кнопка / div загорается (хорошо), и индикатор проливается над кнопкой / div над ней (также хорошо).К сожалению, кнопка / div ниже той, над которой я нахожу курсор, кажется, плавает над освещенной областью (не очень хорошо).
Есть ли способ, которым я могу заставить стиль box_shadow перекрывать оба div выше и нижеdiv курсор, над которым курсор находится?Другие ссылки на моем сайте не будут затронуты, так как стилизация относится только к элементам div, а не к ссылкам.
Я на 99% пути к идеальному (IMO) дизайну, но этот маленькийКажется, проблема не имеет ответа нигде в руководствах, которые я обычно использую в качестве ссылки, или где-либо еще по этому вопросу.
Fiddle: http://jsfiddle.net/nrkYr/5/embedded/result/
Изображение: http://desolosubhumus.webs.com/div%20overlap.jpg
Div CSS:
.mH { cursor: pointer; width: 110px; background-color: #A0522D; color: #000000; font-family: "DreamerOne","sans-serif"; text-shadow: -1px -1px 1px #fc9c47, 1px 1px 1px #fc9c47, 1px 1px 2px #300b00; border: 0 solid #210a02; border-radius: 1em; font-size: 0.9em; font-weight: bold; text-align: center; margin: 1px; box-shadow: inset 0 0 4px 4px #210a02; }
.mH:hover { cursor: pointer; width: 110px; background-color: #F5A77F; font-family: "DreamerOne","sans-serif"; color: #c96914; text-shadow: -1px -1px 1px #210a02, 1px 1px 1px #210a02, 1px 1px 2px #000000; border: 0 solid #876e68; border-radius: 1em; font-size: 0.9em; font-weight: bold; text-align: center; margin: 1px; box-shadow: inset 0 0 4px 4px #432c24, 1px 1px 35px 1px #D87824, -1px -1px 35px 1px #D87824; }
* Обновление: необходимость в префиксах поставщика БЫЛА ошибка с моей стороны.Я загрузил оба браузера снова и переустановил, и теперь box-shadow и border-radius работают во всех четырех браузерах (Safari просто вылетает, когда я ухожу со страницы «купить Apple» по умолчанию, иначе я бы тоже ее протестировал),Я обновлю CSS здесь и на Fiddle всего за секунду.G'bye Cruft ...