Html 整个框作为链接

基本上，我试图让整个框成为一个链接，当你将鼠标悬停在上面时，整个框也会改变颜色。我知道如果我为每个“li”标记编写单独的代码，这很容易做到，但那将是及时的。我做错什么了吗

这是我的密码：

.genrelist li{
浮动：左；
文本转换：大写；
字体大小：粗体；
列表样式类型：无；
文本对齐：居中；
宽度：150px；
高度：150像素；
利润率：50像素；
背景：#fff；
利润率：15px；
边框样式：实心；
边框宽度：5px；
边框颜色：#000；
}
李：悬停{
浮动：左；
列表样式类型：无；
文本对齐：居中；
宽度：150px；
高度：150像素；
背景：#000；
利润率：15px；
边框样式：实心；
边框宽度：5px；
边框颜色：#000；
}

a

需要包装到

li

中才能使HTML结构有效，然后显示为

block

伪元素可用于帮助垂直对齐跨度。

显示：flex

也可以用于将

a

内容居中

使用伪元素演示

li{
浮动：左；
文本转换：大写；
字体大小：粗体；
列表样式类型：无；
文本对齐：居中；
宽度：150px；
高度：150像素；
利润率：50像素；
背景：#fff；
利润率：15px；
边框样式：实心；
边框宽度：5px；
边框颜色：#000；
}
李：悬停{
列表样式类型：无；
文本对齐：居中；
宽度：150px；
高度：150像素；
背景：#000；
利润率：15px；
边框样式：实心；
边框宽度：5px；
边框颜色：#000；
}
李阿{
显示：块；
身高：100%；
宽度：100%；}
a:以前{
内容：''；
显示：内联块；
垂直对齐：中间对齐；
身高：100%；
}
跨度{
显示：内联块；
最大宽度：99%；
}

在Google Chrome 41.0.2272.89 m上运行良好。您可以指定浏览器吗？为什么您提供了一个没有CSS应用于所提供HTML的实例？移动

标记内的锚并删除

。将方框样式应用于

标记。您可能还需要调整

标记上的样式。