Question

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

＆＃13;

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

＆＃13;

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

＆＃13;

Answer 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>

Answer 2

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

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

请记住，在悬停时使用的不仅仅是颜色变化，或者有12个色盲的男性不会看到可能发生的事情。重点和主动增加也是为了可访问性。特别是焦点对键盘用户非常重要。

祝你好运。

Answer 3

div本身没有文字，因此无法应用color属性。所以，当你将没有任何内容的div悬停在color时，没有任何反应。

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

但是，如果您使用color或background-color代替border，原始代码将有效。

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>

在div的悬停时改变链接的颜色

3 个答案: