添加悬停效果以使用内联样式对 div 做出反应

Question

我有一个圆形的 div，用于显示圆形的 css 属性取自 circle 类。圆形 div 的颜色取自内联样式。这里使用了一个名为Status() 的函数，它将返回一个十六进制颜色代码。圆圈根据我们传递给 Status 函数的状态使用颜色呈现。为了实现悬停效果，我在样式对象中添加了一个 ':hover' 属性，但它不起作用。这是我尝试过的代码。关于如何实现这一目标的任何想法？我需要在鼠标悬停时向圆圈添加边框/发光。

<div
  className="circle"
  style={{
   backgroundColor: Status('new'),
   ':hover': {
     boxShadow: `0px 0px 4px 2px ${Status('complience')}`,
    },
   }}
 />

Answer 1

尝试在:hover 之前添加&

这对于内联样式是不可能的，您可能想使用 onMouseEnter 和 onMouseLeave 道具来获取悬停状态并使用它，例如：

class MyComponent extends React.Component {
  state= {
    hover: false,
  }
  handleMouseEnter = () => {
    this.setState({ hover: true });
  }
  handleMouseLeave = () => {
    this.setState({ hover: false });
  }
  render() {
    const { hover } = this.state;
    return(
      <div
        className="circle"
        style={{
          backgroundColor: Status('new'),
          ...(hover && { boxShadow: `0px 0px 4px 2px ${Status('complience')}`}),
        }}
        onMouseEnter={this.handleMouseEnter} // Or onMouseOver
        onMouseLeave={this.handleMouseLeave}
      />
    )
  }
}

替代方案：

• 使用第三方样式库（例如Styled-components）
• 使用类名/css 样式表