如何在内联样式中应用悬停答案

【问题标题】：how to apply hover in Inline styles如何在内联样式中应用悬停
【发布时间】：2020-11-26 19:45:33
【问题描述】：

       <div
            style={{
              height: '20px',
              width: '20px',
              background: 'url(add.svg)'
            }}
          ></div>

我有一个 div，当它没有悬停时我想应用 add.svg 图标，当 div 悬停时我想应用 remove.svg 图标。如何在内联样式中应用悬停？

           <div
            style={{
              height: '20px',
              width: '20px',
              background: 'url(add.svg)',
              ':hover': { background: 'url(remove.svg)', },
            }}
          ></div>

我尝试了 ':hover': { background: 'url(remove.svg)', } 的内联样式，但不起作用。

【问题讨论】：

Inline CSS styles in React: how to implement a:hover? 的副本
是的，我已经阅读了那个问题，但是没有一个答案使用了我想要的内联样式中的 ':hover'。
是功能组件还是类组件？
它的基于类的组件。
他们不使用 :hover 在内联样式中，因为不可能在内联样式中使用 :hover。

标签： reactjs

【解决方案1】：

没有办法只用 CSS 来做，但你可以用 JavaScript 来做（假设你使用的是基于类的组件），它不是那么优雅，但如果有需要，你可以这样做

<div
    onMouseEnter={() => this.setState({ hovering: true })}
    onMouseLeave={() => this.setState({ hovering: false })}
    style={{ background: this.state.hovering ? "url(remove.svg)" : "url(add.svg)" }}
    style={{
        height: '20px',
        width: '20px',
        background: 'url(add.svg)'
    }}
></div>

这将根据项目上的鼠标悬停状态更改背景样式。

【讨论】：

【解决方案2】：

是的，我已经阅读了那个问题，但是没有一个答案在我想要的内联样式中使用 ':hover'。

没有办法，意味着没有办法。我们不能为 :pseudo 元素应用内联规则。

然而，一些库功能让我们可以模拟:hover 的行为，例如。查看样式化的组件。这并不意味着您正在为:hover 应用内联规则。

此外，我不明白为什么开发人员在这种情况下不使用类？我看到很多关于行为的答案，而我们可以简单地使用类来实现。

【讨论】：

是的，我主要使用类，但此代码已经由项目中的某个人编写，我只需要更改悬停时的图标。如果我使用类，我必须替换他们的样式。

【解决方案3】：

:伪选择器不能作为内联样式工作。如果你想这样使用它，也许你可以看看 Tailwindcss。

https://tailwindcss.com/docs/pseudo-class-variants/#app

【讨论】：