Форум PHP программистов > Создание тени тегу li в списке ul при hover

[ Поиск ] - [ Пользователи ] - [ Календарь ]

Полная Версия: Создание тени тегу li в списке ul при hover

Stasonix

16.11.2011 - 17:59

в общем все бы ничего, да только тень ни перекрывает соседний li, смотрите как ведет себя последний тэг li, тень хорошо видна со всех краев:

исходник:


<ul class='ultag'>
    <li><span>color 1</span></li>
    <li><span>color 2</span></li>
    <li><span>color 3</span></li>
</ul>


ul.ultag {
  position: absolute; left: 5%; top: 0;
  width: 100px;
  height: 50px;
  border: 2px solid red;
}
ul.ultag li {
  width: 99px;
  height: 15px;   
  background-color: lightblue;
  float: left;
  border: 1px solid grey;
  text-align: center;
}
ul.ultag li span {
  position: relative; left: 0; top: 0;
  display: block;
  width: 100%;
  height: 90%;
  margin-top: -4px;
  overflow: visible;
}
ul.ultag li:hover {
 box-shadow: 0 0 5px 5px #000000;
}

тень должна выглядеть так при hover на любой из тегов li в списке.
Какие варианты могут быть решения? Я уже попробовал !important; дописать в box-shadow, но без толку.

п.с. fiddle: box-shadow live code example

Спустя 14 часов, 40 минут, 51 секунда (17.11.2011 - 07:40) linker написал(а):

ul.ultag li:hover 
{
    box-shadow: 0px 0px 5px #000000;
    -moz-box-shadow: 0px 0px 5px #000000;
    -webkit-box-shadow: 0px 0px 5px #000000;
    filter: progid:DXImageTransform.Microsoft.shadow(direction=45, color=#000000, strength=5);
            progid:DXImageTransform.Microsoft.shadow(direction=135, color=#000000, strength=5);
            progid:DXImageTransform.Microsoft.shadow(direction=225, color=#000000, strength=5);
            progid:DXImageTransform.Microsoft.shadow(direction=315, color=#000000, strength=5);
    zoom: 1;
}

Кстати, IE<9 (если не ошибаюсь) не умеет делать hover ни на чём кроме ссылок (<a href=""></a>), поэтому ищем хак, что-то типа csshover3.htc, точно не помню и вставляем behavior: url("csshover3.htc");

Спустя 3 часа, 39 секунд (17.11.2011 - 10:40) sebastjan написал(а):

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

<div class="xxx">
 <a href="">1111</a>
 <a href="">2222</a>
 <a href="">3333</a>
</div>

Стилзирую ЦСС

<style>
.xxx a{............}
</style>

Значительно короче.
Ну а про hover для ИЕ6 просто использовать ОнМаузОвер и прописать стиль чтоб курсор был нужный.
Псевдо ХОВЕР.

Спустя 33 минуты, 10 секунд (17.11.2011 - 11:14) Zerstoren написал(а):

sebastjan - Списки для того и списки. Чтоб их браузер, поисковик воспринимал как списки. Если первого можно обмануть, то поисковик не получится.

Спустя 50 минут, 58 секунд (17.11.2011 - 12:05) sebastjan написал(а):

Zerstoren
Почему то мне показалось что автор темы как раз хочет применть списки для навигации, поэтому так и прокоментировал, конечно же списки надо использовать по назначению,
а сегодняшний инет просто пестрит навигационными панелями на списках.
Я так и не понял почему, в чём тут плюс?
Мне кажется что навигация не имеет отношения к спискам, по этому и не вижу смысла растягивать хтмл код.
Про поисковики , тут очень скользкий вопрос (даст ли положительный результат вгонять в список то что по сути не обьеденнено смыслом). В класическом варианте (списки) - это некое перечисление какой то группы в блоке информации-нумерованно или нет.
Навигационная панель-бар по сути разношерстная информация то есть (главная*статьи*новости*блоги*) ну и тому подобное не имеющее отношение к списку.
Может быть это моё заблуждение.

не буду настаивать.

Быстрый ответ:

Здесь расположена полная версия этой страницы.