Установите цвет посещенной ссылки на любой цвет не посещенной ссылки (P.S. не обычный вопрос) - PullRequest
Новая
       43

Установите цвет посещенной ссылки на любой цвет не посещенной ссылки (P.S. не обычный вопрос)

49 голосов
/ 18 декабря 2009

Мне нужно установить для CSS: a: значение независимо от того, цвет, для которого установлено нормальное значение a.

То, что я хочу сказать браузеру: для посещенных ссылок, используйте тот же цвет, что и не посещенные ссылки, независимо от цвета .

Мне нужно сделать это без указания определенного цвета.

Например, если появляется какой-то странный браузер, который использует «зеленый» в качестве цвета для обычных не посещаемых ссылок, этот CSS должен дать указание браузеру использовать тот же зеленый для посещаемых ссылок. То, какой цвет используется браузером, должно быть прозрачным для моего кода ... отсюда и фраза "независимо от цвета".

P.S. Я знаю, как установить: посещенный и определенный цвет. Я не об этом спрашиваю.

P.P.S. Я готов использовать JavaScript, если мне нужно. Но я действительно склонен заставить браузер делать это.

Зачем мне делать что-то подобное, спросите вы?

Синий цвет, который IE8 использует для ссылок, довольно крутой. Это не # 0000FF. Это хороший оттенок синего. Поэтому я хочу установить его как для посещенных, так и для не посещенных ссылок. Но я не должен делать снимок экрана или использовать какое-либо дополнение, чтобы каждый раз выбирать точное шестнадцатеричное значение. Если позже IE изменит цвет на какой-то другой удивительный оттенок, этот код должен просто работать. Я не хочу снова находить гекс и менять его по всему коду.

Это только одна из причин. Не дай мне гекс для этого синего цвета. Узнать это легко, но это не был бы ответ!

Ответы [ 10 ]

9 голосов
/ 05 мая 2011 
a:link{color:inherit}
a:active{color:inherit}
a:visited{color:inherit}
a:hover{color:inherit}

Черт, да.

Мне это было нужно, потому что некоторые текстовые ссылки (в отличие от ссылок на изображения) были основной частью главного меню моего проекта, поэтому я хочу, чтобы они МОИ цвета, а не цвета браузера!

Каждая ссылка была заключена в группу тегов p, класс которой имел определенный цвет (МОЙ цвет), установленный в CSS.

4 голосов
/ 18 июля 2010

Сценарий Дэнни Роберса работает для меня в Firefox и Chrome (не уверен насчет IE).

FWIW, специальное значение HyperlinkText было бы "стандартным" способом сделать то, что вы хотите, но оно было удалено из CSS3 весной 2003 года.

ЭтоПохоже, Firefox - единственный браузер, который начал его реализовывать, потому что для Firefox работает следующее:

a: visit {color: -moz-hyperlinktext;}

3 голосов
/ 17 ноября 2010

Нет способа сделать это с помощью CSS. Браузер указывает, что ссылка была посещена на основе только той записи базы данных, о которой он знает, а затем использует цвета по умолчанию, указанные в конкретной конфигурации браузера.

CSS физически просто не может получить цвет чего-либо на странице. Так оно и есть. Единственный способ - использовать javascript как ответ Дэнни Робертса.

Причина, по которой я думаю, что его ответ не работает правильно, заключается в том, что $('a:visited') просто выбирает все посещенные ссылки в тот момент времени, а затем цвет для них меняется.

Что вам нужно сделать, это следить за событиями кликов и каждый раз повторять код: 

var normalColor = $('a:link').css('color');
$('a').click(function() {
    $('a:visited').css('color', normalColor);
});
3 голосов
/ 07 января 2010

Я не думаю, что есть чистое решение CSS. Обычно вы выбираете цвет и устанавливаете и: link, и a: посещения того же цвета.

Я пытался {color: наследовать}, но это было бесполезно.

Это решение jQuery прекрасно работает. 

<!DOCTYPE html>
<html>
    <head>
        <script src="http://ajax.googleapis.com/ajax/libs/jquery/1.3.2/jquery.min.js"
            type="text/javascript"></script>
        <script type="text/javascript">
            $(function(){
                var normalColor = $('a:link').css('color');
                $('a:visited').css('color', normalColor);
            });
        </script>
    </head>
    <body>
        <a href="http://www.google.com">Google</a>
        <a href="nowhereyouvebeen">No where you've been</a>
    </body>
</html>
1 голос
/ 18 декабря 2009

Я не думаю, что есть чистый способ CSS достичь этого. Я думаю, вам нужно будет использовать JavaScript, чтобы получить цвет a, а затем установить a: посещения этого цвета, и это, вероятно, не будет работать во всех браузерах, если не указан {color: #dea}.

0 голосов
/ 26 мая 2017 
a.one:link {
    color:#996600;
    background-color:transparent; 
    text-decoration:underline;  
}

a.one:hover { 
    color: red;
    background-color: transparent;
    text-decoration: underline; 
}

a.one:visited {
    color: #996600;
    background-color: transparent;
    text-decoration: underline
}

a.one:hover { 
    color: red;
    background-color: transparent;
    text-decoration: underline; 
}
0 голосов
/ 03 января 2017

Мне потребовалось решение, так как заголовок этого вопроса предлагает «Установить цвет посещенной ссылки на любой цвет не посещенной ссылки». Мне нужен был способ сравнения изображений экранных снимков содержимого страницы браузера, который я использую для регрессионного тестирования (pdiff - perceptual diff). Вот код, который работал для меня. 

(function(){
  var links = document.querySelectorAll('a');
  for (var i=0; i<links.length; i++) {
    var link = links[i];
    if (link.href) { //must be visitable
      var rules = window.getMatchedCSSRules(link) || [];
      var color = '#0000EE' //most browsers default a:link color;
      for (var j=0; j<rules.length; j++) {
        var rule = rules[j];
        var selector = rule.selectorText;
        color = rule.style['color'] || color;
      }
      link.setAttribute('style','color:' + color + ' !important');
      //this was enough for me but you could add a 'a:visited' style rule to the rule set
    }
  }
})();
0 голосов
/ 22 октября 2013 
 a:link, a:visited {color: inherit;}
 a:hover, a:focus {color:inherit;}
0 голосов
/ 05 октября 2013

Presto: 

$(function(){
  var sheet = document.styleSheets[document.styleSheets.length-1];
  sheet.insertRule(
    'a:visited { color:'+$('a:link').css('color')+'; }',
    sheet.length
   );
});

Я протестировал и могу подтвердить, что это работает в Chrome. Имейте в виду, однако, к каким sheet вы добавляете правила - убедитесь, что атрибут мультимедиа применяется к носителю, который вам нужен. Кроме того, если у вас есть какие-либо правила, которые отменяют окраску a, это, вероятно, не будет работать должным образом, поэтому убедитесь, что ваши таблицы стилей не содержат этого.

В любом случае, я не уверен, что это очень мудрая практика. Лично я всегда четко определяю цвета своих ссылок для каждого сайта.

PS:

Судя по всему, IE (не знаю, какие версии) настаивает на своем собственном синтаксисе: 

sheet.addRule('a:visited', $('a:link').css('color'), -1);
0 голосов
/ 05 октября 2013

Не бери в голову это. Смотрите мой другой ответ для чего-то более относящегося к вопросу аскера.

Я делаю это: 

a, a:visited { color:#4CA1F6; }
a:hover      { color:#4CB6E1; } a:active  { color:#0055AA; }

Теперь, когда эта тема заставляет меня задуматься, , и я сделал следующие улучшения в моем методе: 

a:link, a:visited { color:#4CA1F6; }
a:hover, a:focus  { color:#4CB6E1; } 
a:active          { color:#0055AA; }
Добро пожаловать на сайт PullRequest, где вы можете задавать вопросы и получать ответы от других членов сообщества.

Похожие темы

...