将鼠标悬停在超链接上，突出显示大背景区域

Question

如何（悬停时）使用HTML和CSS突出显示超链接的默认区域？类似于Google导航链接（日历，文档，阅读器等）。

我可以通过在HyperLink中包裹div并更改div的background-color来点击链接，但无法弄清楚如何在悬停时执行此操作。任何类似于谷歌导航的解决方案示例？

Answer 1

要做到这一点，你需要显示：阻止“a”，这样你就可以给它一个宽度和一个高度。 例如：

a {
  display: block;
  width: 300px;
  height: 200px;
}

然后

 a:hover {
    background-color: #000;
 }

Answer 2

更改CSS中a：hover psuedoclass中的背景颜色。

这将适用于所有标签，因此如果您只想要一个，请使用ID。

a:hover
{
    background: blue;
}

Answer 3

如果您的意思与此基本示例类似：http://jsfiddle.net/z6B9X/
如果链接的背景发生了变化（大于默认区域），那么就从这些基础开始，然后从那里开始。

下一步是将背景图像添加到链接，在悬停时更改背景。还可以添加边框，左侧或右侧的图像等...