时间戳

首页 > 解决方案 > 为什么 h2 和 h4 标签在悬停状态下不会改变颜色？

html - 为什么 h2 和 h4 标签在悬停状态下不会改变颜色？

问题描述

我试图在将两个链接悬停时更改它们的文本颜色，但颜色没有改变？是什么原因？

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>

标签： htmlcsshover

解决方案

元素是元素的任何颜色。

默认情况下，标题inherit的颜色是其父元素的颜色。

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

<h1>The h1 is black</h1>

但是如果你明确设置它，那么它就是你设置的任何颜色......</p> 

div {
  color: blue;
}

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

<h1>The h1 is pink</h1>

您正在设置ato lightblue，但由于标题不是color: inherit他们没有继承它。:hover无关紧要。

编写一个针对标题的选择器（例如a:hover h2, a:hover h4 { … }）

推荐阅读