Как изменить цвет гиперссылки при использовании в качестве заголовка ссылки

#html #css #hyperlink

#HTML #css #гиперссылка

Вопрос:

У меня есть несколько гиперссылок с заголовками внутри <code> </code> , например:

 <a href="http://some_link"> <code>Title</code> </a>

Как я могу изменить цвет гиперссылки при наведении на нее курсора мыши? Сначала я попытался добавить в .css файл

 a:hover {
    color: red;
}

но это не делает этого, окрашиваются только обычные гиперссылки. Затем я попытался

 a:hover, code:hover {
    color: red;
}

который почти работает, но он также окрашивает <code> разделы без гиперссылок, такие как

 <code> some code here </code>

Как я могу раскрасить только <code> гиперссылки, исключая <code> не гиперссылки, при наведении на них курсора мыши?

1. атрибут цвета CSS по умолчанию для code is inherit , что приведет к тому, что текст кода будет иметь тот же цвет, что и ссылка при наведении курсора мыши. У вас должно быть какое-то переопределяющее правило для цвета кода. Пожалуйста, укажите, что CSS, а также это, вероятно, проблема специфики.

2. @JosephMarikle Вот .css . Ответ Драйдена делает это для меня.

3. В этом проблема. a code:hover должно быть a:hover code . Состояние наведения принадлежит привязке.

4. @JosephMarikle Я вижу, только начинаю .css/html . Спасибо!

5. @vsoftco Вы можете прочитать это , чтобы понять специфику CSS, обращаться к этому каждый раз, когда вам нужна ссылка на CSS, и проверять это на наличие рекомендаций по интерфейсу. Приветствия и удачи!

Ответ №1:

Предполагая, что реальная проблема заключается в специфичности из-за правила, задающего code указанный цвет, я могу порекомендовать два подхода. Во-первых, вы можете указать цвет для правила a code .

 code{color:red;}
a:hover, a:hover code{color:green}

 <a href="http://some_link"> <code>Title</code> </a>

Другой способ — разрешить code наследование ее цвета, если он находится в теге привязки.

 code{color:red;}
a code{color:inherit}
a:hover{color:green}

 <a href="http://some_link"> <code>Title</code> </a>

Ответ №2:

Укажите теги привязки внутри <code> блоков следующим образом:

 a:hover, a code:hover {
  color: red;
}

Вот пример этого в действии: https://jsfiddle.net/gcbvduyb /

 a:hover, a:hover code {
  color: red;
}

Также будет работать.

Ответ №3:

 a:link {
  color: blue;
  background-color: transparent;
  text-decoration: underline;
}

Пожалуйста, проверьте эту ссылку: -http://www.thesitewizard.com/css/links-mouseover.shtml