Question

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

:host(.active) {
   ...
}

有没有办法应用伪类，如：以类似的方式悬停？：host（：hover）似乎不起作用。也不是：主持人：悬停。我知道我可以在JS中使用主机监听器来应用类，但在这种情况下做类似的事情很奇怪。

编辑：我使用的是Angular 2.2.0

EDIT2：我的问题是我没有设置：主机显示：阻止因此无法将鼠标悬停在它上面。

Answer 1

:host(:hover) { ... }应该有效，但是否有效取决于@Component({ encapsulation: ViewEncapsulation.??? })。

ViewEncapsulation有三个选项：

ViewEncapsulation.None - 您的组件样式将合并为全局样式
ViewEncapsulation.Emulated - 重命名样式，并将唯一属性添加到元素中以防止全局样式冲突。这模拟了影子DOM。
ViewEncapsulation.Native - 使用shadow 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;
}

Answer 2

这对我来说很好用

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

如何应用伪类如：hover到ng2伪类：host

2 个答案: