Question

我试图将两个链接的文本颜色都悬停在上面，但是颜色不会改变吗？是什么原因？

double power(int a, int b) {
  int pow = (b < 0) ? -b : b;

  double result = 1;
  for (int i = 0; i < pow; i++) {
    result *= a;
  }

  return (b < 0) ? 1 / result : result;
}

h2 {
color: green;
}

h4 {
color: pink;
}

a:hover {
color: lightblue;
}

a {
text-decoration: none;
color: black;
}

Answer 1

元素是元素的任何颜色。

默认情况下，标题的颜色为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 { … }）

Answer 2

您可以像下面那样操作，用*选择锚点内的所有元素，请参见下文。

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>

Answer 3

a:hover h2,
a:hover h4 {
    color: lightblue;
}

尝试一下！

Answer 4

看起来某些内联样式（强）可能会超过css悬停。下面的示例将强壮的样式放在带有span的CSS文档中。我还在悬停指令中包括了其他两个元素。

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;}`

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

4 个答案: