连接盒子问题

Question

我想悬停一个链接（<a>标签，其中包含一个<div>标签），所以颜色变成红色但只有当我悬停黄色的领域！我的问题是，如果光标不在黄色字段上，也可以将其悬停。

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

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

https://jsfiddle.net/3phy4950/

任何想法我怎么能解决这个问题？

Answer 1

它不与宽度工作，因为你申请这种风格的标签。但是标签默认显示为内联，这意味着它们不占用整个空间/行。

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

你需要做的是显示风格从a div更改为内联：

a div { 
    display: inline; 
} 

见Fiddle

Answer 2

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

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

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