应用悬停效果与子元素的条件必须有特定的类?

Question

我试图使列表上的伪元素在悬停在它上面时出现，条件是子<a>具有活动类。

所以我这样写:

.sidebar__content-link.active li:hover::after {
display: block;
content: attr(data-after);
}

我单独尝试了.li:hover::after，它可以工作，但是当写作时，它们都不起作用。我已经找了好几个小时了

这是整个HTML代码(它在React中):

<li data-after={element}>
<Link
href={`/${element}`}
className={`sidebar__content-link ${isSidebarOpen ? 'active' : ''}`}
>
{element}
</Link>
</li>

Answer 1

您需要针对包含与活动类链接的<li>。

:

li:has(.sidebar__content-link.active):hover:after {
display: block;
content: attr(data-after);
}