Стиль CSS выбирает активный элемент меню иначе, чем другие при наведении курсора - PullRequest
Новая
       5

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

0 голосов
/ 05 сентября 2011

Следующий HTML-код создан Joomla 1.7 для меню сайта, над которым я работаю: 

<ul class="menu-tabbed-horiz">

<li class="item-435 current active parent">
    <a class="firstmenuitem" href="/joomla/" >Home</a>
</li>
<li class="item-467">
    <a href="/joomla/index.php/menu2" >Menu 2</a>
</li>
<li class="item-468">
    <a href="/joomla/index.php/memu3" >Menu 3</a>
</li>

</ul>

С помощью CSS я создаю это меню.Например, я стилизую пункт меню, над которым наведена мышь, так: .menu-tabbed-horiz a:hover.Активный может быть оформлен следующим образом: .menu-tabbed-horiz .current a.

Это работает без проблем, но теперь я бы хотел по-другому оформить пункт меню, когда он является текущим и на котором находится курсор, чем когда он только что зависална.Что-то вроде .menu-tabbed-horiz a:hover && !.current, но это, очевидно, не работает.

Любые предложения будут оценены, Фабиан

Ответы [ 2 ]

1 голос
/ 05 сентября 2011

Если я правильно понял ваш вопрос, то вы ищете что-то вроде этого: 

.menu-tabbed-horiz .current a:hover { /*Hovered and current*/ }
.menu-tabbed-horiz a:hover { /*Hovered (all)*/ }

Это должно работать, потому что первый селектор более специфичен, чем второй, и поэтому будет применяться кэлементы с .current вместо второго селектора.

Вот рабочий пример приведенного выше кода.

0 голосов
/ 05 сентября 2011

Вы не можете делать такие вещи напрямую. Решение состоит в том, чтобы определить «текущий» стиль для .menu-tabbed-horiz li и «текущий» стиль для .menu-tabbed-horiz li.active.

Второй стиль более специфичен, чем первый, поэтому он будет иметь приоритет, когда присутствуют оба стиля. Первый стиль будет применен ко всем элементам .menu-tabbed-horiz, которые не имеют класса .current.

...