我有以下HTML结构,我想在每个LI上实现悬停效果(类似于当前对具有Capital A的li的悬停效果),它的子li也应该从最上面的父LI的开头悬停(下面的示例就像Capital一样)悬停效果)
ul { list-style: none; padding: 0; margin:0 }
li { margin:0; padding: 0; cursor:pointer}
.container > ul .items {padding-left:1.5rem}
.items:hover {
background:red
}
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width">
</head>
<body>
<div class="container">
<ul class="parent" id="Head">
<li class="items"><a><span>A</span></a></li>
<li class="items">
<div class="group"><a><span>B</span></a> </div>
<ul class="group-item">
<li class="items"><a><span>b</span></a></li>
<li class="items"><a><span>b</span></a></li>
</ul>
</li>
<li class="items">
<div class="group"><a><span>C</span></a></div>
<ul class="group-item">
<li class="items"><a><span>c</span></a></li>
<li class="items"><a><span>c</span></a></li>
<li class="items">
<div class="group"> <a><span>c</span></a> </div>
<ul class="group-item">
<li class="items"><a><span>c1</span></a></li>
<li class="items"><a><span>c1</span></a></li>
<li class="items">
<div class="group"> <a><span>c1</span></a> </div>
<ul class="group-item">
<li class="items"><a><span>c2</span></a></li>
<li class="items"><a><span>c2</span></a></li>
<li class="items"><a><span>c2</span></a></li>
</ul>
</li>
</ul>
</li>
</ul>
</li>
</div>
</body>
</html>