Question

我正在尝试在vaadin-grid中实现行悬停样式，将鼠标悬停在行上时会更改其样式。我的代码是

<dom-module id="grid-styles" theme-for="vaadin-grid">
    <template>
        <style>
             [part~="body-cell"] :hover {
                 background-color: beige;
            }   
        </style>
    </template>
</dom-module>

但是此代码不起作用。有人可以帮忙吗？也没有任何文档。

PS。在以前的版本中，这是使用--vaadin-grid-body-row-hover-cell完成的。

编辑：我为用户提供了以下代码，但它仅影响单元格，而不影响整个行

[part~="cell"]:hover ::slotted(vaadin-grid-cell-content) {
  background-color: beige;
}

Answer 1

这就是我这样做的方式（某些样式具有更深入，更具体的选择器）：

<dom-module id="grid-styles" theme-for="vaadin-grid">
  <template>
      <style>
        :host [part~="row"]:hover [part~="body-cell"]{
          background-color: rgba(0, 55, 108, 0.12);
        } 

        :host [part~="body-cell"] ::slotted(vaadin-grid-cell-content){
          cursor: pointer;
        }
      </style>
  </template>
</dom-module>

Answer 2

以下代码可以做到这一点

[part~="row"]:hover > [part~="body-cell"]{
background-color: beige;
}

如何在vaadin-grid中实现行悬停样式？

2 个答案: