html - 子锚标记获得焦点时的大纲列表项

Question

当焦点位于锚标记上时，我正在尝试更改列表项的背景。它适用于悬停，如何在焦点期间更改背景？

我想让列表更易于访问，这样即使用户关注锚标记，相应的列表项也应该突出显示

.main-list{
  padding: 10px;
  margin: 0 10px;
}

.main-list .list-item{
  list-style-type: none;
  background: #ccc;
  padding: 10px;
  border-bottom: 1px solid #333;
  cursor: pointer;
}

.main-list .list-item:hover, .main-list .list-item:focus{
  background: #ddd;
}

<ul class="main-list">
	<li class="list-item"><a href="#">dummy text</a></li>
	<li class="list-item"><a href="#">dummy text</a></li>
	<li class="list-item"><a href="#">dummy text</a></li>
	<li class="list-item"><a href="#">dummy text</a></li>
</ul>

标签： htmlcss

Answer 1

使用焦点内。免责声明：您需要它的兼容性如何？

.main-list{
  padding: 10px;
  margin: 0 10px;
}

.main-list .list-item{
  list-style-type: none;
  background: #ccc;
  padding: 10px;
  border-bottom: 1px solid #333;
  cursor: pointer;
}

.main-list .list-item:hover, .main-list .list-item:focus-within{
  background: #ddd;
}

<ul class="main-list">
	<li class="list-item"><a href="#">dummy text</a></li>
	<li class="list-item"><a href="#">dummy text</a></li>
	<li class="list-item"><a href="#">dummy text</a></li>
	<li class="list-item"><a href="#">dummy text</a></li>
</ul>