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

Question

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

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

Answer 1

尝试添加&之前:hover

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

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 样式表