链接框的问题

Question

我想悬停链接（<a>标签，其中包含<div>标签），因此颜色变为红色但仅当我悬停黄色字段时！我的问题是，如果光标不在黄色字段上，您也可以将其悬停。

我知道我可以将标签放入div标签，但我想链接整个框而不仅仅是文本。

我也尝试使用a { width: 100px; }，但这当然不起作用。

https://jsfiddle.net/3phy4950/

我有什么想法可以解决这个问题吗？

Answer 1

使用inline-block作为<a>代码的显示格式。

a {
  width: 100px;
  display: inline-block;
}

您的updated fiddle

Answer 2

它不适用于宽度，因为您正在将此样式应用于标记。但是标签默认显示内联，这意味着它们不占用整个空格/线。

默认情况下，div标签是显示块，这意味着它将占用整个空格/线。

您需要将显示样式从a div更改为内联：

a div {
   display: inline;
}

请参阅Fiddle

Answer 3

这个怎么样：

<div class="btn" onclick="location.href='http://google.com'">» Hover Me</div>

和css：

.btn {
    background-color: yellow;
    width: 100px;
}

.btn:hover {
    color: red;
}