Html 使用BEM和Less时，如何在子元素上应用悬停选择器？

这是我第一次在同一个项目中使用BEM和less

我当前遇到

&:hover

问题，并试图将目标指向子选择器

我知道less的工作原理，我知道为什么它不起作用，但我不明白的是我将如何着手解决它

目前我有以下几点

.sidebar {

    &__item {

        &:hover {
            background: rgba(0,0,0,.06);

            &-name {
                color: @primary;
            }
        }
    }
}

如您所见，问题在于

&-name

选择器

DOM的当前结构如下所示

ul.sidebar
    li.sidebar__item
        a
        span.sidebar__item-name

---

当我将鼠标悬停在

侧边栏\u项目上时

我想在项目和子项目上触发悬停效果

使用

和

添加

和

，这样您就可以得到预期的结果

  .sidebar {

    &__item {

      &-name {
        &:hover {
            background: rgba(0,0,0,.06);
        }
      }

    }
}

快乐编码

也许它能帮助你

.sidebar {    
    &__item {
        $item: &;
        &:hover {
            background: rgba(0,0,0,.06);
            #{$item}-name {
                color: @primary;
            }
        }
    }
}

此选项也可能适用

.sidebar {    
    &__item {
        &:hover & {
            background: rgba(0,0,0,.06);
            &-name {
                color: @primary;
            }
        }
    }
}

---

这似乎很好，但唯一的问题是它会影响当前悬停的工作方式，并且背景也会应用于

\uuuu item-name

？我只想用

\uuu item-name

在悬停时应用颜色更改，或者您的意思是

&\uuu item:hover&\uu item-name{background:#ccc}

？！