Почему теги h2 и h4 не изменяют цвет в состоянии наведения? - PullRequest
Новая
       11

Почему теги h2 и h4 не изменяют цвет в состоянии наведения?

0 голосов
/ 15 января 2019

Я пытаюсь изменить цвет текста обеих ссылок при наведении на них курсора, но цвет не меняется? В чем причина? 

h2 {
color: green;
}

h4 {
color: pink;
}

a:hover {
color: lightblue;
}

a {
text-decoration: none;
color: black;
}
<!DOCTYPE html>
<html>
<head>
</head>
<body>
<a href="#">
    <h2>This is a header</h2>
    <h4>This is another header</h4>
</a>

Ответы [ 4 ]

0 голосов
/ 16 января 2019

Вы можете сделать это, как показано ниже, выбрать все элементы внутри якоря с помощью *, см. Ниже. 

h2 {
color: green;
}

h4 {
color: pink;
}

a:hover * {
color: lightblue;
}

a {
text-decoration: none;
color: black;
}
<!DOCTYPE html>
<html>
<head>
</head>
<body>
<a href="#">
    <h2>This is a header</h2>
    <h4>This is another header</h4>
</a>
0 голосов
/ 15 января 2019 
a:hover h2,
a:hover h4 {
    color: lightblue;
}

Попробуйте это!

0 голосов
/ 15 января 2019

Похоже, что некоторые из встроенных стилей (сильные) могут перевесить зависание css. Пример ниже помещает сильный стиль в документ CSS с span. Я также включил два других элемента в инструкцию наведения.

HTML <a href="#"> <p>This is a paragraph</p>enter code here <span>This is strong</span> </a> CSS p {color: green;}

`span {color: pink;`
`font-weight: bold}`

`a:hover, p:hover, span:hover  {color: lightblue;}`

`a {text-decoration: none; color: black;}`
0 голосов
/ 15 января 2019

Элемент любого цвета.

По по умолчанию цвет заголовка равен inherit, поэтому он принимает цвет своего родительского элемента. 

div {
  color: blue;
}
<div>
  The div is blue
  <h1>The h1 is blue</h1>
</div>

<h1>The h1 is black</h1>

Но если вы установите его явно, то это будет тот цвет, который вы установили, чтобы он был ... 

div {
  color: blue;
}

h1 {
  color: pink
}
<div>
  The div is blue
  <h1>The h1 is pink</h1>
</div>

<h1>The h1 is pink</h1>

Вы устанавливаете a на lightblue, но поскольку заголовки не color: inherit, они не наследуют его. :hover не имеет значения.

Напишите селектор, который нацелен на заголовки (например, a:hover h2, a:hover h4 { … })

...