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

Question

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

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

Answer 1

您必须将 css 应用于组件的阴影 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;
  }
`);

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

I want to trigger handle to be affected when hover the splitter

vaadin

vaadin14