我尝试用悬停来改变我的svg图像和文本，但它不像我想要的那样工作。我想在跨越这2个（svg或文本）中的一个的时候改变这两个。 也许我在html结构上犯了错误，也可能在css上犯了错误。 如果你能帮助我，请帮忙，谢谢。

.logout-image { mask: url("../../../assets/images/log-out.svg"); background-color: #62799D; width: 20px; height: 20px; margin-right: 20px; margin-left: 20px; } .logout-container { display: flex; flex-direction: row; align-items: center; padding: 8px 0px 8px 24px; width: ; height: 60px; position: static; left: 0px; top: 280px; color: #62799d; margin-top: 35vh; } .logout-container:hover { background: #0c2e6e; color: white; } .logout-image:hover{ background: white; } <ul className="SidebarList"> {sidebarData.map((value, key) => { return ( <li className="row" key={key} onClick={() => { window.location.pathname = value.link; }} > {" "} <div className="icon">{value.icon}</div>{" "} <div className="title">{value.title}</div> </li> ); })} {" "} {" "} //here is the problem <li className='logout-container'> <div className="logout-image"></div> <div className="title" >Logo Out</div> </li> //until here </ul> 这就是我想用悬停改变的方式:

在此处输入链接说明

这就是现在的工作方式： 在此处输入链接说明

并且只有当我和我的图标svg图像交叉时，它才会改变背景:

在此处输入链接说明

顺晟科技：