如何用纯CSS实现H5云台控制组件的悬停高亮效果？

需求说明 #

• 开发Web组件用于向IPC（网络摄像机）发送指令，控制其旋转
• 组件基础样式已完成，需实现鼠标悬停按钮时的扇形高亮效果
• 优先采用纯CSS实现，SVG方案也可接受

现有实现代码（基于Grommet框架） #

export function PanControl() {
  const targetRef = useRef();
  const [, setShowDrop] = useState(false);
  useEffect(() => setShowDrop(true) , []);
  return (
    <Box align='center'>
      <Stack anchor='center'>
        <Box background='placeholder' round='full' width='small' height='small' ref={targetRef} />
        <Box background='active' round='full' width='xxsmall' height='xxsmall' />
      </Stack>
      {
        targetRef.current && (
          <>
            <Drop align={{ top: 'top' }} target={targetRef.current} stretch={false} plain>
              <Button icon={<CaretUpFill />} />
            </Drop>
            <Drop align={{ bottom: 'bottom' }} target={targetRef.current} stretch={false} plain>
              <Button icon={<CaretDownFill />} />
            </Drop>
            <Drop align={{ left: 'left' }} target={targetRef.current} stretch={false} plain>
              <Button icon={<CaretLeftFill />} />
            </Drop>
            <Drop align={{ right: 'right' }} target={targetRef.current} stretch={false} plain>
              <Button icon={<CaretRightFill />} />
            </Drop>
          </>
        )
      }
    </Box>
  );
}

方案一：纯CSS实现（推荐） #

通过状态跟踪悬停方向，结合clip-path属性裁剪出对应扇形高亮区域：

export function PanControl() {
  const targetRef = useRef();
  const [hoverDirection, setHoverDirection] = useState(null);
  const [, setShowDrop] = useState(false);
  useEffect(() => setShowDrop(true) , []);

  // 根据方向生成对应的裁剪路径
  const getClipPath = () => {
    switch(hoverDirection) {
      case 'up': return 'polygon(50% 0%, 0% 100%, 100% 100%)';
      case 'down': return 'polygon(0% 0%, 100% 0%, 50% 100%)';
      case 'left': return 'polygon(0% 0%, 0% 100%, 100% 50%)';
      case 'right': return 'polygon(100% 0%, 100% 100%, 0% 50%)';
      default: return 'none';
    }
  };

  return (
    <Box align='center'>
      <Stack anchor='center'>
        <Box background='placeholder' round='full' width='small' height='small' ref={targetRef} />
        {/* 高亮层：裁剪出对应扇形 */}
        <Box 
          background='rgba(0, 123, 255, 0.3)' 
          round='full' 
          width='small' 
          height='small'
          style={{ clipPath: getClipPath(), pointerEvents: 'none' }}
        />
        <Box background='active' round='full' width='xxsmall' height='xxsmall' />
      </Stack>
      {
        targetRef.current && (
          <>
            <Drop align={{ top: 'top' }} target={targetRef.current} stretch={false} plain>
              <Button 
                icon={<CaretUpFill />} 
                onMouseEnter={() => setHoverDirection('up')}
                onMouseLeave={() => setHoverDirection(null)}
              />
            </Drop>
            <Drop align={{ bottom: 'bottom' }} target={targetRef.current} stretch={false} plain>
              <Button 
                icon={<CaretDownFill />} 
                onMouseEnter={() => setHoverDirection('down')}
                onMouseLeave={() => setHoverDirection(null)}
              />
            </Drop>
            <Drop align={{ left: 'left' }} target={targetRef.current} stretch={false} plain>
              <Button 
                icon={<CaretLeftFill />} 
                onMouseEnter={() => setHoverDirection('left')}
                onMouseLeave={() => setHoverDirection(null)}
              />
            </Drop>
            <Drop align={{ right: 'right' }} target={targetRef.current} stretch={false} plain>
              <Button 
                icon={<CaretRightFill />} 
                onMouseEnter={() => setHoverDirection('right')}
                onMouseLeave={() => setHoverDirection(null)}
              />
            </Drop>
          </>
        )
      }
    </Box>
  );
}

关键说明

• 用hoverDirection状态记录当前悬停的按钮方向
• clip-path的polygon参数精准裁剪出四个方向的扇形区域
• 高亮层设置pointerEvents: 'none'，避免干扰按钮的交互事件
• 半透明背景色可根据需求调整色调和透明度

方案二：SVG实现 #

通过SVG路径绘制扇形，按需显示对应区域：

1. 定义扇形SVG组件

const HoverSector = ({ direction, visible }) => {
  // 四个方向的扇形路径
  const sectorPaths = {
    up: 'M 50 0 L 0 100 L 100 100 Z',
    down: 'M 0 0 L 100 0 L 50 100 Z',
    left: 'M 0 0 L 0 100 L 100 50 Z',
    right: 'M 100 0 L 100 100 L 0 50 Z'
  };
  return (
    <svg width="100%" height="100%" viewBox="0 0 100 100" style={{ pointerEvents: 'none' }}>
      <path 
        d={sectorPaths[direction]} 
        fill="rgba(0, 123, 255, 0.3)" 
        style={{ display: visible ? 'block' : 'none' }}
      />
    </svg>
  );
};

2. 集成到主组件
   将方案一中的CSS高亮Box替换为<HoverSector>：

<Stack anchor='center'>
  <Box background='placeholder' round='full' width='small' height='small' ref={targetRef} />
  <HoverSector direction={hoverDirection} visible={!!hoverDirection} />
  <Box background='active' round='full' width='xxsmall' height='xxsmall' />
</Stack>

优化提示 #

• 可替换硬编码颜色为Grommet主题变量（如theme.global.colors.brand），保持风格统一
• 若需要更平滑的过渡效果，可给高亮层添加transition: clip-path 0.2s ease样式

内容的提问来源于stack exchange，提问作者Jim Jin