我想在悬停分离器时触发手柄受到影响

【问题标题】：I want to trigger handle to be affected when hover the splitter我想在悬停分离器时触发手柄受到影响
【发布时间】：2021-09-07 21:40:30
【问题描述】：

我正在使用 vaadin-split-layout，我想知道当悬停分离器部分是否也会影响手柄部分。当拆分器悬停时，我尝试更改两者的颜色

vaadin-split-layout::part(splitter):hover > vaadin-split-layout::part(handle) {
background-color: var(standard-hover);
&::after {
    background-color: limegreen;
}}

【问题讨论】：

标签： vaadin vaadin14

【解决方案1】：

你必须将你的 css 应用到组件的 shadow DOM 上。

您可以在 frontend/styles/shared-styles.js 中这样做：

import '@vaadin/vaadin-lumo-styles/all-imports';
import { registerStyles, css } from '@vaadin/vaadin-themable-mixin/register-styles.js';
...
registerStyles('vaadin-split-layout', css`
  [part='splitter']:hover [part='handle']::after {
    background-color: limegreen;
  }
`);

【讨论】：