VPF::Использование нескольких псевдоклассов

Sinneren

Дата 4.5.2011, 18:47 (ссылка)

(нет голосов)

Загрузка ...

{YaGoo}

Профиль
Группа: Участник
Сообщений: 68
Регистрация: 20.3.2009
Где: Уфа

Репутация: 1
Всего: 1

Привет. Дано меню-в простом состоянии просто ссылки без картинок.
При наведении должно становиться оформление как для текущей страницы.
Само оформление меню для текущей (current) сделано. Использовался растягивающийся фон шириной в пиксель и добавление скруглений через псевдоклассы :before и :after.
Вот пример:

Код


<ul class="menu-top">
            <li class="menu current"><a>Главная</a></li>
            <li class="menu"><a>Тарифы</a></li>
            <li class="menu"><a>Личный кабинет</a></li>
            <li class="menu"><a>Инструкции</a></li>
            <li class="menu"><a>О сервисе</a></li>
</ul>

Код


.menu{display:inline-block;margin-left:7px;margin-right:7px;}
.menu:hover,.current{
background:url(img/menu_bg.png) repeat-x;
padding:0px 0 0 0;
color:#FFF;
}
.current:before{
content:url(img/menu_bl.png);
background: #FFF;
display:inline-block;
margin:0px 7px 0 0;
}
.current:after{
content:url(img/menu_br.png);
background: #FFF;
display:inline-block;
margin:0px 0 0 7px;
}

Как можно или возможно ли реализовать без подмены класса через onMouseOver-ы ?

Это сообщение отредактировал(а) Sinneren - 4.5.2011, 18:49

ReFleX

Дата 4.5.2011, 19:17 (ссылка)

(нет голосов)

Загрузка ...

Опытный

Профиль
Группа: Участник
Сообщений: 499
Регистрация: 26.9.2004
Где: Таллинн

Репутация: 1
Всего: 3

Интересно, думаю что скорее всего это не возможно

Я обычно делаю так: <a><span class="left"></span>button<span class="right"></span></a>

Sinneren

Дата 5.5.2011, 11:58 (ссылка)

(нет голосов)

Загрузка ...

{YaGoo}

Профиль
Группа: Участник
Сообщений: 68
Регистрация: 20.3.2009
Где: Уфа

Репутация: 1
Всего: 1

Придётся на спанах. Спасибо.

SelenIT

Дата 5.5.2011, 13:02 (ссылка)

(нет голосов)

Загрузка ...

баг форума

Профиль
Группа: Завсегдатай
Сообщений: 3996
Регистрация: 17.10.2006
Где: Pale Blue Dot

Репутация: 97
Всего: 401

Должно работать, вообще-то.

--------------------

Осторожно! Данный юзер и его посты содержат ДГМО! Противопоказано лицам с предрасположенностью к зонеризму!

ReFleX

Дата 5.5.2011, 14:30 (ссылка)

(нет голосов)

Загрузка ...

Опытный

Профиль
Группа: Участник
Сообщений: 499
Регистрация: 26.9.2004
Где: Таллинн

Репутация: 1
Всего: 3

Да ты прав, а я сам и не знал что можно использовать a:hover:before вместе smile

0 Пользователей читают эту тему (0 Гостей и 0 Скрытых Пользователей)
0 Пользователей:
« Предыдущая тема \| Вёрстка веб-сайтов \| Следующая тема »