html - 整个框作为链接

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

这是我的代码：

.genrelist li {
	float: left;
	text-transform: uppercase;
	font-weight: bolder;
	list-style-type: none;
	text-align: center;
	width: 150px;
	height: 150px;
	margin: 50px;
	background: #fff;
	margin: 15px;
	border-style: solid;
	border-width: 5px;
	border-color: #000;
}

.genrelist li:hover {
	float: left;
	list-style-type: none;
	text-align: center;
	width: 150px;
	height: 150px;
	background: #000;
	margin: 15px;
	border-style: solid;
	border-width: 5px;
	border-color: #000;
}

<ul>
<a href="#"><li><span>Fiction Short Stories</span></li></a>
<a href="#"><li><span>Non-Fiction Short Stories</span></li></a>
<a href="#"><li><span>Comic Strips</span></li></a>
<a href="#"><li><span>Poetry</span></li></a>
<a href="#"><li><span>Biblical</span></li></a>
<a href="#"><li><span>Inspirational</span></li></a>
<a href="#"><li><span>Children's Corner</span></li></a>
<a href="#"><li><span>Comedy</span></li></a>
<a href="#"><li><span>Drama</span></li></a>
<a href="#"><li><span>Chiller</span></li></a>
<a href="#"><li><span>Romance</span></li></a>
<a href="#"><li><span>Science Fiction</span></li></a>
<a href="#"><li><span>Memoirs</span></li></a>
<a href="#"><li><span>In The Feathers</span></li></a>
</ul>

当您将鼠标悬停在单词上时，它们都起作用，但是当您将鼠标悬停在其任何部分上时，只有第一项起作用。任何帮助表示赞赏！

最佳答案

需要将a包装到li中以验证您的HTML结构，然后将其显示为block。

伪元素可用于帮助垂直对齐您的跨度。
display:flex;也可用于将a内容居中。

演示使用伪元素

li {
	float: left;
	text-transform: uppercase;
	font-weight: bolder;
	list-style-type: none;
	text-align: center;
	width: 150px;
	height: 150px;
	margin: 50px;
	background: #fff;
	margin: 15px;
	border-style: solid;
	border-width: 5px;
	border-color: #000;
}

 li:hover {
	list-style-type: none;
	text-align: center;
	width: 150px;
	height: 150px;
	background: #000;
	margin: 15px;
	border-style: solid;
	border-width: 5px;
	border-color: #000;
}

li a {
  display:block ;
  height:100%;
  width:100%;}
a:before {
  content:'';
  display:inline-block;
  vertical-align:middle;
  height:100%;
  }
a span {
  display:inline-block;
  max-width:99%;
  }

<ul>
<li><a href="#"><span>Fiction Short Stories</span></a></li>
<li><a href="#"><span>Non-Fiction Short Stories</span></a></li>
<li><a href="#"><span>Comic Strips</span></a></li>
<li><a href="#"><span>Poetry</span></a></li>
<li><a href="#"><span>Biblical</span></a></li>
<li><a href="#"><span>Inspirational</span></a></li>
<li><a href="#"><span>Children's Corner</span></a></li>
<li><a href="#"><span>Comedy</span></a></li>
<li><a href="#"><span>Drama</span></a></li>
<li><a href="#"><span>Chiller</span></a></li>
<li><a href="#"><span>Romance</span></a></li>
<li><a href="#"><span>Science Fiction</span></a></li>
<li><a href="#"><span>Memoirs</span></li></a>
<li><a href="#"><span>In The Feathers</span></a></li>
</ul>