Почему не работает псевдокласс active для отдельного нажатого пункта меню ?
Задача — заменить в меню текст на графические кнопки.
CMS — wordpress. Шаблон Fruitful.
В разделе Внешний вид — меню каждому пункту меню присвоил класс. Допустим menu-1.
В настройках шаблона есть раздел css куда можно прописывать свои настройки.
Вот код css для изменения стиля отдельного пункта меню:
Все работает, кроме active! (
В style.css есть класс который отвечает за общий стиль и наверное конфликтует\перекрывает active:
Ну и главный и вечный вопрос — что делать??
p.s. в css и php пока не силен, только учусь, поэтому и спрашиваю.
спасибо, надеюсь на помощь.
upd:
Есть почти решение:
.main-navigation ul .menu-1.current-menu-item a <
Но здесь есть минус — если у кнопки три состояния и она активна то при наведении видно оба состоянии — и активного и при наведении.
- Вопрос задан более трёх лет назад
- 10724 просмотра
- Вконтакте
В CSS у ссылок есть 4 псевдокласса:
a:link — стиль ссылок по-умолчанию;
a:visited — стиль посещенных ссылок;
a:hover — стиль ссылки при наведении курсора;
a:active — стиль ссылки в нажатом состоянии, т. е. пока нажал и держишь =)
Чтобы выделить пункт меню текущей страницы нужно прописать стили для класса:
CSS Active link not working
On hover the navigation changes the background color. Thats simple. However I can not get the background to stay if the link is active. So if your on page1 it stays with a blue background.
Here is the CSS i have tried so far.
Non of it works, I have googled this loads, but it all says active-link should work?
Can anyone tell me where I am going wrong? Sorry if its simple CSS isn’t my strongest language.
Thanks for the suggestions, however
doesn’t work either.
10 Answers 10
I saw that there’s an error here, as it should be :active and not .active , so replace:
Else, if you are talking about each page having an active state, then what CSS you have written is correct. In your HTML, you need to add this:
Now, that particular link will be displayed in the active state. It has to be done for each page, if you are using HTML, or it can be done using programming if you are using something like PHP. So, the same thing in PHP would be:
To solve that with just CSS tricks you’ll need to use the Selector Target, first you attribute different id for the pages and put the link to that reference, then you change the style base on the ID that is being target.
But essentially it works like this:
Here is your HTML with the id and target changes
And after all that css you need to change the style based on the target like so:
This works, but the usual is to use a server side, such as ruby on rails, python, php, whatever language you feel confortable that will provide the exact url and that use a simple jQuery .addClass() or .removeClass() or even .toggleClass() to put the active class on the right link.
Hope It Helps! Cheers
a:visited is actually your ‘.active’ state. For the effect that was causing you to wonder what was going on.
You’ve got to include it in your a: pseudo classes if you’re going to try and utilize it that way.
Establishing a «default/reset» state for your <a> elements will prevent this type of «WTF?» scenarios:
When you want a particular link to show «highlighted» on its corresponding page, you’re best off to use an ID or Class (depending on your usage):
EDIT
Disregard what you’re reading above about PHP, Targeter, etc. It seems that you’re just trying to make your navigation ‘highlight’/change for just the page that matches the link in the nav. You can easily do this with straight HTML/CSS (if you have problems with this, server-side code solutions will just frustrate you more). See the three <a> elements in my answer. Then add this to your CSS (Fix #2):
Не работает a:active хотя вроде все учел!
Все прекрасно, только a:active не срабатывает! Что может быть?
Если рассуждать, что дело в a:visited, то вроде как это описано тут: #menu1 a <. >и к тому же a:active сидит ниже всех.
Затем попробовал так:
Теперь когда у меня ссылка активна — она отображается как посещенная (visited). Как быть-то?
Ссылка на комментарий
Поделиться на других сайтах
16 ответов на этот вопрос
- Сортировать по голосам
- Сортировать по дате
Рекомендованные сообщения
Присоединяйтесь к обсуждению
Вы можете опубликовать сообщение сейчас, а зарегистрироваться позже. Если у вас есть аккаунт, войдите в него для написания от своего имени.
Примечание: вашему сообщению потребуется утверждение модератора, прежде чем оно станет доступным.
CSS: hover работает, но: active — нет
Я готовлю тему WordPress и не могу понять, почему :active в моем CSS не работает, а :hover работает нормально.
2 ответа
Что вы пытаетесь достичь? Если вы удалите: hover и нажмете ссылку, я думаю, вы обнаружите, что: active работает нормально. Но от этого мало пользы, так как вы задаете ему такой же стиль, как когда наводите на него курсор. Итак, в основном вы наводите на него курсор, а затем отображается фоновое изображение, затем вы щелкаете ссылку, и то же фоновое изображение продолжает отображаться.
Псевдокласс :hover выбирает элемент, когда курсор мыши находится прямо над ним.
Псевдокласс :active применяет стили при нажатии на элемент (или при активации другим способом).