当有人选择项目时，无法将悬停按钮扩展到所选项目

Question

如果有人能帮忙，我将不胜感激。我一直试图在选择时将悬停范围扩大到特定项目的全宽，但没有效果，我已经在上面呆了几个小时，我搜索了整个互联网，但对我来说什么都不管用，我非常感谢你的帮助，下面是css

```React
import React, {useState} from 'react'
import styled from "styled-components"
const NavRow = ({selected,Icon,title}) => {
const [active, setActive] = useState(false)

return (
<>  
{active && selected} 
<Container onClick={()=> setActive(!active)} active= {active}>
<IconBtn onClick={()=> setActive(!active)} active={active}>   
<Icon/>
</IconBtn>
<Title onClick={()=> setActive(!active)} active={active} >
<h4> {title}</h4>
</Title>

</Container>
</>
)
}
export default NavRow
const Container = styled.div`
display:flex;
align-items:center;
margin-top:-10px ;
box-sizing:border-box;

&:hover{
cursor:pointer;
background-color:lightgray;
}
@media (max-width:768px) {
width:30vw;
height:5vh;
margin:3px ;
&:hover{
cursor:pointer;
background-color:lightgray;
box-sizing:border-box;



}

}

background-color: ${(props)=> props.active ? "lightgray" : " " }

`
const Title  = styled.div`
font-weight:600;
font-size:11px;
flex:1;
&:hover{
font-weight:700;
font-size:12px;

}
font-weight: ${(props)=> props.active ? "800" : ""};
white-space : nowrap;
margin-left:8px;

`
const IconBtn = styled.div`
color:#606060;
font-size:large !important;
margin-bottom:10px;

&:hover{
color:red;
}
color: ${(props)=> props.active ? "red" : " "};

Answer 1

请使用CCD_2css，这样它将占据整个容器。