css - 在 mixin 中触发悬停状态

Question

我有一个带有默认状态和悬停状态的 Less mixin。现在，当我悬停在父元素上时，我需要在 mixin 中激活悬停状态。

较少

#icons () {
  .settingsIcon() {
    background: url("settings.png");
    &:hover {
      background: url("settings_hover.png");
    }
  }
}

.SettingsButton {
    height: 50px; 
    width: 200px;
   .icon {
       #icons > .settingsIcon();
    }
}

HTML:

<div class="SettingsButton" >
  <span>Settings</span>
  <div class="icon"></div>
</div>

我需要确保在 settingsIcon 悬停上发生的相同效果也会在按钮悬停上触发。所以我想我需要做这样的事情，我以某种方式“调用”settingsIcon 的hover。像这样的东西(无效的 Less 代码)

.SettingsButton:hover {
  .icon {
     #icons > .settingsIcon():hover;
  }
}

我该怎么做？

Answer 1

像下面的例子一样重写你的 mixins 可能会更好。本质上，我们将您的基本设置和 hover 设置拆分为同一命名空间 (#icons()) 中的两个不同混合宏，然后根据需要调用它们。

#icons () {
  .settingsIcon() {
    background: url("settings.png");
  }
  .settingsIconHover(){     
    background: url("settings_hover.png");
  }
}

.SettingsButton {
  height: 50px; 
  width: 200px;
  .icon {
    #icons > .settingsIcon();
    &:hover{
      #icons > .settingsIconHover();
    }
  }
  &:hover .icon{
    #icons > .settingsIconHover();
  }
}

---

实现此目的的另一种方法是在 #icons 中为所有状态仅保留一个条目，将 .icon 选择器也移动到 mixin 中，例如在下面的片段中。

#icons () {
  .settingsIcon() {
    .icon{
      background: url("settings.png");
    }
    &:hover .icon, & .icon:hover{ /* & here means .SettingsButton */
      background: url("settings_hover.png");
    }
  }
}

.SettingsButton {
  height: 50px; 
  width: 200px;
  #icons > .settingsIcon();
}