更改 div 悬停时链接的颜色答案

【问题标题】：Changing color of link on hover of a div更改 div 悬停时链接的颜色
【发布时间】：2016-05-01 05:53:12
【问题描述】：

我正在尝试更改<div> 悬停时链接的颜色。仅使用CSS可以吗？如果没有，我将如何实现这一目标？

div {
  border: 1px solid black;
  padding: 15px;
}
div:hover {
  color: red;
}

<div>
  <a href='www.google.com'> www.google.com </a>
</div>

【问题讨论】：

Change link color on div hover 或 Change link color on div hover 的可能重复
HTML / CSS - Hover Link Color的可能重复

标签： html css hyperlink css-selectors

【解决方案1】：

您需要设置锚点的样式，而不是 div。试试这个：

div {
  border: 1px solid black;
  padding: 15px;
}
div:hover a {
  color: red;
}

<div>
  <a href='www.google.com'> www.google.com </a>
</div>

【讨论】：

【解决方案2】：

div 本身没有文本，因此没有地方可以应用 color 属性。因此，当您将一个没有任何内容的 div 悬停在 color 时，什么都不会发生。

正如另一个答案中提到的，将hover 应用于包含文本的锚元素。

但是，如果您使用 background-color 或 border 而不是 color，则您的原始代码将起作用。

div {
    border: 1px solid black;
    padding: 15px;
}

div:hover {
    color: red;                /* won't work; nothing to color */
    background-color: aqua;    /* this will work */
    border: 2px dashed #777;   /* this will work */
}

<div>
    <a href = 'www.google.com'> www.google.com </a>
</div>

【讨论】：

顺便说一句，使用背景和背景颜色有什么区别？我总是只使用背景，它似乎和背景颜色一样。
background-color 只设置背景颜色。 background 是用于设置多个背景值的简写属性。没错，background: black 在功能上等同于background-color: black。但是background还可以设置background-image、background-position等（list-style和list-style-type之间存在类似的关系）。在此处了解更多信息：developer.mozilla.org/en-US/docs/Web/CSS/background

【解决方案3】：

rjdown 的回答是正确的，但问题是你是否还需要 div。

div 所做的只是提供一个块供您设置样式。如果您将锚定样式设置为块，那么您就拥有了。代码膨胀不利于您的 SEO 和无头痛。 ;-)

试试这个：

a:link {
  display: block;
  /* make it act as the div would */
  overflow: auto;
  /* or what you want, but good practice to have it */
  border: solid 1px black;
}
a:hover,
a:focus,
a:active {
  border: solid 1px red;
}

&lt;a href='www.google.com'&gt; www.google.com &lt;/a&gt;

请记住，在悬停时不要使用颜色变化，否则 12 名患有色盲的男性中就有 1 名可能看不到任何事情发生。重点和积极添加也是为了可访问性。尤其是焦点对于键盘用户来说非常重要。

祝你好运。

【讨论】：

好点。我们实际上不需要 div，因为我们可以更改链接来做与 div 相同的事情。它将不那么混乱，代码也更少。 +1 好点。

【解决方案4】：

我们可以简单地将继承值分配给锚标签的所有 CSS 属性，因此，当您将鼠标悬停在其容器 DIV 元素上方时，它将继承 DIV:hover 中定义的所有新属性。

div {
  display: flex;
  align-items: center;
  justify-content: center;
  text-decoration: none;
  height: 100px;
  width: 100%;
  color: white;
  background: blue;
}

a {
  text-decoration: inherit;
  color: inherit;
}

div:hover {
  color: orange;
}

<div>
  <a href="www.google.com">www.google.com</a>
</div>

【讨论】：