Как скрыть посещенные ссылки?
Нужно как-то сделать так, чтобы ранее посещенные ссылки не отображались на странице.
Пожалуйста, прежде чем советовать мне a:visited проверьте работоспособность этого метода, поскольку у меня это не сработало на гугл хроме.
- Вопрос задан более трёх лет назад
- 666 просмотров
1 комментарий
Средний 1 комментарий
это исключительный случай, связанный с «уязвимостью» истории браузеров.
Решения вопроса 2
TeamLead, Developer
Как вариант a:visited выставить что-либо из этого: opacity:0; position:absolulte; left: -999999; height: 0; overflow: hidden;
Другой вариант: на js при нажатии ссылки писать в localStorage селекторы этих ссылок и при загрузке страницы (или другом событии) просто удалять их из DOM.
Третий вариант, передавать инфу на бэк и там уже рулить состоянием ссылки, например на основе сессии.
В любом случае скрывать посещенные ссылки странная затея, но топик не об этом 🙂
Ответ написан более трёх лет назад
Нравится 1 1 комментарий
ramovich @ramovich Автор вопроса
Спасибо, но все перечисленные вами свойства CSS не сработали. На бэкенде не могу ничего сделать так как страница со ссылками локальная и формируется скриптом на десктопе.
Не будет работать. Т.к. :visited ограничен грубо говоря только значениями цвета текста и фона. Максимум что можно сделать задать одинаковый цвет фону и тексту, но цвет фона должен быть определен заранее в селекторе a:link. Иначе не сработает.
Как поменять цвет посещенной ссылки , но не везде
Всем привет , столкнулся с проблемой , возможно ли не поменять а убрать полностью цвет посещенной ссылки в css ? Копаю гугл , везде написано поставить тотже цвет что и цвет текста , но такой вариант не подходит, так как на сайте есть разные блоки с разными цветами. Спасибо
Отслеживать
задан 27 сен 2016 в 11:26
1,395 19 19 серебряных знаков 47 47 бронзовых знаков
Что такое «убрать цвет»? Сделать цвет ссылки равным цвету фона?
27 сен 2016 в 11:59
3 ответа 3
Сортировка: Сброс на вариант по умолчанию
a, a:visited, a:hover, a:active
Отслеживать
ответ дан 27 сен 2016 в 11:36
1,753 1 1 золотой знак 15 15 серебряных знаков 21 21 бронзовый знак
Вы сказали, что «на сайте есть разные блоки с разными цветами», т.е. эти блоки имеют свой класс, этим вы и можете воспользоваться.
Например у Вас используются блоки с классом .a1 и .a2. Если Вам надо поменять цвет посещённой ссылки в .a1, то сделайте так:
.a1 a:visited
А если нужно поменять цвет посещённой ссылки везде, кроме этих DIVов, то пишите так:
a:visited .a1 a:visited, .a2 a:visited
Как убрать фиолетовый цвет ссылок в css
Цвет ссылок, по умолчанию, меняется в одном из трёх случаев:
- Ссылка, по которой пользователь уже перешёл. За это состояние отвечает псевдокласс :visited
- Ссылка при наведении курсора мыши. Изменить стили можно с помощью псевдокласса :hover
- Ссылка при клике, но до момента, как произошёл переход. Определить стили у такой ссылки можно у псевдоэлемента :active
href="https://ru.hexlet.io">На сайт Хекслета a:hover /* Цвет при наведении */ color: red; > a:visited /* Цвет посещённой ссылки */ color: green; > a:active /* Цвет ссылки при клике */ color: blue; > Состояния ссылок в CSS. Псевдоклассы
Первый урок четвертой главы мы начнем с изучения ссылок, а точнее, будем разбираться с тем, какие состояния бывают у ссылки, и как через CSS можно повлиять на ее вид в том или ином состоянии, используя соответствующие псевдоклассы.
Какими бывают состояния ссылок
Взаимодействия пользователя с элементами веб-страницы отслеживаются браузером. Если говорить о ссылках, им присваивается определенный статус в зависимости от того, какое действие было совершено (наведение, нажатие, переход по ссылке и т. д.). Это мы и называем состояниями ссылок.
Когда вы пишете стиль CSS, то с помощью селектора указываете, для какого элемента он предназначен. В самом начале учебника, когда мы изучали селекторы, в одном из уроков рассматривались псевдоклассы CSS, благодаря которым можно задавать стили для разных состояний элемента, в том числе для ссылок. Ниже — четыре состояния, которые могут принимать ссылки:
- :hover — ссылка, на которую наведен курсор;
- :active — активная ссылка (та, по которой совершается клик, или на которой удерживается кнопка мыши);
- :link — ссылка, еще не посещенная пользователем;
- :visited — посещенная ссылка.
Для справки: из соображений безопасности набор стилей, которые можно использовать для ссылок :visited , ограничен. Посещенные ссылки принимают только свойства color , background-color , border-color (и его производные), column-rule-color , outline-color . При этом свойство к посещенной ссылке можно применить, только если это же свойство задано и для обычной. Прозрачность цвета, установленная через альфа-канал для элемента :visited , будет проигнорирована. JavaScript-метод getComputedStyle всегда возвращает значение цвета непосещенных ссылок, даже если у посещенных ссылок цвет иной.
Стилизация состояний
С помощью псевдокласса :hover можно существенно изменить стиль ссылки, которая находится в состоянии наведенного на нее курсора. Простейший пример:
a < color: red; >/* обычный цвет ссылки */ a:hover < color: blue; >/* цвет ссылки, на которую наведен курсор */
Псевдокласс :active также поддается гибкой стилизации:
a:active < background-color: yellow; >/* цвет фона ссылки в момент нажатия на нее */
Если в ваши планы входит максимально детальная проработка дизайна ссылок, то желательно определить стили для всех четырех состояний. При этом очень важно соблюсти порядок, в котором будут записаны селекторы с псевдоклассами. Обязательно размещайте их в следующей последовательности:
a:link < color: red; >a:visited < color: grey; >a:hover < color: blue; >a:active
Что будет, если поменять строки местами? В этом случае некоторые стили перестанут работать согласно правилам каскадности. Дело в том, что ссылка может находиться одновременно в двух состояниях, к примеру, в :visited и в :hover , и если расположить стиль для :hover выше, чем стиль для :visited , то первый перекроется.
Выбор ссылок с помощью селекторов
Как записать селектор с псевдоклассом для определенной группы ссылок? Например, если вам нужно применить какой-то стиль для всех ссылок навигационного меню с идентификатором #main-menu , когда такая ссылка находится в состоянии наведенного на нее курсора, вы можете использовать такой селектор:
#main-menu a:hover
Либо, если у каждой ссылки этого меню дополнительно имеется свой класс (допустим, это .menu-link ), то такая запись тоже подойдет:
#main-menu a.menu-link:hover #main-menu .menu-link:hover /* так тоже сработает */
Чтобы определить стили для всех состояний данных ссылок, запишите для каждого псевдокласса отдельное правило:
#main-menu .menu-link:link < color: red; >#main-menu .menu-link:visited < color: grey; >#main-menu .menu-link:hover < background-color: #a38beb; >#main-menu .menu-link:active
Обширные возможности CSS в плане построения селекторов позволяют с удобством делать точную выборку ссылок, которые вам необходимо стилизовать. А какие именно свойства CSS применимы к ссылкам, мы обсудим в следующем уроке.