Question

我有一个div，它的形状为圆形，而 css 属性显示的是一个来自circle类的圆形。圆形div的颜色来自内联样式。这里使用了一个名为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样式表

使用内嵌样式添加悬停效果以响应div

1 个答案: