如何应用伪 classes 像 :hover 到 ng2 伪 class :host

Question

我知道我们可以将 class 样式应用于 CSS 中的主机组件，如下所示：

:host(.active) {
   ...
}

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

编辑：我正在使用 Angular 2.2.0

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

Answer 1

这对我来说很好

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

Answer 2

: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;
}

如何应用伪 classes 像 :hover 到 ng2 伪 class :host

How to apply pseudo classes like :hover to ng2 pseudo class :host

css

css-selectors

pseudo-class

angular