如何对子元素使用 :hover 效果？

Question

我有这个 html 结构：

.Gallery > .Gallery__container > .Gallery__container-item > .Gallery__container-item-image

我想 :hover .Gallery__container-item 影响到 .Gallery__container-item-image

  &-item{
      background-color: $darkgray;
      padding: 20px;
      border-radius: 20px;
      cursor: pointer;
      &:hover{
        &-image{ //doesn't recognized
          transition: scale 1s linear;
          transform: scale(1.1);
        }
      }
    }

使用SCSS

Answer 1

您代码中的 & 符号 & 不会编译成您想要的。
这是一个简化的示例（标记和样式更少）：

.Gallery {
    &-item {
        &:hover {
            &-image {
                transition: scale 1s linear;
            }
        }
    }
}

将编译为：

.Gallery-item:hover-image {
  transition: scale 1s linear;
}

现在，您的可能性很小，第一种是写完整的 class 姓名：

.Gallery {
    &-item {
        &:hover {
            .Gallery-item-image {
                transition: scale 1s linear;
            }
        }
    }
}

您还可以定义一个变量，该变量将采用 :hover 之前的选择器的值，这可能就是您想要做的：

.Gallery {
    &-item {
        $selector : &;
        &:hover {
            #{$selector}-image {
                transition: scale 1s linear;
            }
        }
    }
}

如何对子元素使用 :hover 效果？

How to use :hover affects to child element?

sass