整个框作为链接

Question

基本上，我试图让整个盒子成为一个链接，当你将鼠标悬停在它上面时，整个盒子也会改变颜色。我知道如果我为每个＆＃34; li＆＃34;编写单独的代码，这很容易做到。标签，但这将是及时的。有什么我做错了吗？

这是我的代码：

＆＃13;

＆＃13;

.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;	
}

＆＃13;

<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>

＆＃13;

＆＃13;

＆＃13;

当你将鼠标悬停在单词上时，它们都可以正常工作，但当你将鼠标悬停在它的任何部分上时，只有第一个项目可以正常工作。任何帮助表示赞赏！

Answer 1

a需要包含在li中以验证您的HTML结构，然后显示为block。

伪元素可用于帮助垂直对齐跨度。 display:flex;也可以用来a内容。

使用伪元素进行演示

＆＃13;

＆＃13;

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%;
  }

＆＃13;

<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>

＆＃13;

＆＃13;

＆＃13;