如何将 :hover 之类的伪类应用于 ng2 伪类 :host答案

【问题标题】：How to apply pseudo classes like :hover to ng2 pseudo class :host如何将 :hover 之类的伪类应用于 ng2 伪类 :host
【发布时间】：2017-11-29 01:04:48
【问题描述】：

我知道我们可以将类样式应用到 CSS 中的宿主组件，如下所示：

:host(.active) {
   ...
}

有没有办法以类似的方式应用 :hover 之类的伪类？ :host(:hover) 似乎不起作用。 :host:hover 也没有。我知道我可以使用 JS 中的主机侦听器为此应用类，但在这种情况下做这样的事情很奇怪。

编辑：我正在使用 Angular 2.2.0

EDIT2：我的问题是我没有将 :host 设置为 display: 块，因此无法将鼠标悬停在它上面。

【问题讨论】：

:host 没有功能，所以 :host:hover 不起作用。这就是为什么您需要使用功能变体的原因，例如 :host(:hover) - 它适用于 Chrome，但我还没有让它在任何其他浏览器中工作。
您使用的是哪个版本的 Angular？
我已经添加了我正在使用 2.2.0 的 cmets。我已经用 2.2.0 检查了你的 Plunker，它似乎工作正常。我想我的应用程序有问题，谢谢你的回答。

标签： css angular css-selectors pseudo-class

【解决方案1】：

:host(:hover) { ... } 应该可以工作，但是否工作取决于@Component({ encapsulation: ViewEncapsulation.??? })。

ViewEncapsulation 有三个选项：

ViewEncapsulation.None - 您的组件样式将合并到全局样式中
ViewEncapsulation.Emulated - 样式被重命名并且独特的属性被添加到元素中以防止全局样式冲突。这模拟了影子 DOM。
ViewEncapsulation.Native - 使用影子 DOM。这需要浏览器支持。

注意:host(:hover) 是正确的，应该适用于所有情况。 :host:hover 将与 None 和 Emulated 一起使用，但不是为 Native 编写它的正确方法。因此，为了合规，请尝试使用:host(:hover)。

因此，由于缺乏支持（检查can i use），请确保将encapsulation 设置为ViewEncapsulation.Emulated。这应该是默认选项。

Working Plunker:

@Component({
  selector: 'my-app',
  template: `
    <div>
      <h2>Hover me please</h2>
    </div>
  `,
  styles: [`
    :host(:hover) {
      color: Cyan;
    }
  `],
  encapsulation: ViewEncapsulation.Emulated
})
export class App {
  constructor() {

  }
}

生成的 HTML 如下所示：

  <my-app _nghost-c0="" ng-version="4.2.4">
    <div _ngcontent-c0="">
      <h2 _ngcontent-c0="">Hover me please</h2>
    </div>
  </my-app>

风格如下：

[_nghost-c0]:hover {
  color: Cyan;
}

【讨论】：

any 版本的 Shadow DOM 不支持 :host:hover，因为规范不允许这样做。我不希望它能够在任何地方工作，甚至不能在模拟模式下工作。我很肯定这只是 Angular 的事情。
@BoltClock 是的，抱歉，我改了。它适用于None 和Emulated。至少在 Angular 4.2.4 上。确实不错，我们应该一直使用:host(:hover) { ... }

【解决方案2】：

这对我来说很好用

:host{ display: block} 
:host:hover { background: yellow;}
 or
:host(:hover) { background: yellow;}

【讨论】：

你确定吗？ :host:hover 不会匹配任何东西。这就是功能变体存在的原因。
你在测试什么？这听起来像是一个失败的实现。
悬停时宿主元素将变为黄色。如果我遗漏了什么或者我误解了问题，请告诉我。
不，我在问您正在测试什么浏览器。在您的答案中包含一个其他人可以查看的工作演示也会更好。（我开始怀疑这可能只是 Angular 的事情，在这种情况下，它公然违反规范，就像 Angular 的所有事情一样。）
我在这里测试 Chrome 示例 plnkr.co/edit/vDcQpskcxr2s0MSPILog?p=preview