Question

我有一个父div和其他几个嵌套在其中的包含文本的div。我想要做的是在悬停时更改我的父div的背景颜色，并在点击时重定向到另一个页面

所以我做了

<a href="">
  <div class="parentDiv">
    <div>hello</div>
    <div>user</div>
  </div>
</a>

.parentDiv:hover{background-color:#72c1bf;cursor:pointer;text-decoration:none;}

它实际上可以在IE8和Firefox中使用但是在chrome中我强调了两个子div中的所有单个texte。为什么呢？

Answer 1

由于文字装饰位于<a>标记上，因此您还需要为text-decoration: none;标记设置<a>。

但是，根据html标准，<a>标记（内联元素）不应包含任何块元素，例如<div>，请参阅html specifications

Answer 2

尝试使用ie9进行a:hover{text-decoration:none}测试，使用原始代码对chrome进行测试不会使用！important属性进行eben。

Answer 3

尝试这个：

<a href="" class="link">
  <div class="parentDiv">
    <div>hello</div>
    <div>user</div>
  </div>
</a>

和CSS：

a.link{display:block; text-decoration:none}
.parentDiv:hover{background-color:#72c1bf;cursor:pointer;text-decoration:none;}

Answer 4

如果单个

<a>

标签是一个问题（就像它对我来说）。使用此：

<a href='#' style='text-decoration:none;' >

Answer 5

将text-decoration: none添加到a代码会让它消失，但我不确定Chrome是对还是错，在这里。使用a标记作为这样的块元素，但我不确定它在HTML 5之前是否合法。此外，我必须添加color: black，否则文本也是蓝色或紫色（访问或未访问的链接颜色）。

在谷歌浏览器链接div周围

5 个答案: