如何在悬停时定位scss中的后缀

Question

我正在使用SCSS进行nextJS项目，我有一个问题是针对悬浮和焦点的孩子:

.accordion {
max-width: 600px;
margin: 4rem auto;
width: 90%;
font-family: "Raleway", sans-serif;
background: #f4f4f4;
&__copy {
display: none;
padding: 1rem 1.5rem 2rem 1.5rem;
color: gray;
line-height: 1.6;
font-size: 14px;
font-weight: 500;

&--open {
display: block;
}
}
&:hover {
// How to target &__copy?
&__copy {
// code
}
}
}

Answer 1

如果我理解正确的话-您的目标是在聚焦/悬停在其父时应用一些代码到.accordion__copy.accordion.

如果是这样的话，下面的代码应该可以做到:

&:hover > & {
// How to target &__copy?
&__copy {
// code
}
}

如果你的目标是当鼠标悬停在上时瞄准子对象，则子对象本身那么这个应该可以修复它:

&__copy {
display: none;
padding: 1rem 1.5rem 2rem 1.5rem;
color: gray;
line-height: 1.6;
font-size: 14px;
font-weight: 500;

&--open {
display: block;
}
&:hover {
// code
}
}