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

Question

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

我目前遇到了一个问题，&: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

当我将鼠标悬停在sidebar__item我想在项目和孩子上触发悬停效果时。

标签： htmlcsslessbem

Answer 1

加上&_item-name,&__item所以你会得到预期的结果！

  .sidebar {

    &__item {

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

    }
}

快乐编码！