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

Question

<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)', }，但不起作用。

Answer 1

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

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

Answer 2

没有办法只使用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>

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

Answer 3

是的，我已经读过这个问题，但没有一个答案按照我的意愿在内联样式中使用"：悬停"。

没有办法，意味着没有办法。我们无法将内联规则应用于:pseudo元素。

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

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