如何在内联样式中应用hover效果

10 浏览
0 Comments

如何在内联样式中应用hover效果

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

我尝试在内联样式中使用':hover': { background: 'url(remove.svg)', }，但没有起作用。

0

3 答案

0 Comments

问题出现的原因：在CSS中，无法仅使用内联样式来实现鼠标悬停效果，但可以使用JavaScript来实现。这是因为CSS只能控制元素的静态样式，无法处理交互行为。

解决方法：通过使用JavaScript，在类组件中添加鼠标进入和离开事件的监听器，并根据鼠标悬停状态改变背景样式。具体代码如下：

 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)'
    }}
>

以上代码将根据鼠标悬停状态来改变元素的背景样式。当鼠标进入元素时，背景将变为"remove.svg"的图像，当鼠标离开元素时，背景将变为"add.svg"的图像。

0
0 Comments

问题的出现的原因是该用户想要在行内样式中应用:hover伪类，但之前的问题和答案中都没有使用行内样式来实现这个效果。

然而，在行内样式中无法应用伪类元素，这是不可能的。但是，一些库提供了模拟:hover行为的功能，例如查看styled component。这并不意味着你正在应用行内样式来实现:hover效果。

此外，我不明白为什么开发者在这种情况下不使用class？我看到很多答案都在绕过这个问题，而我们只需简单地使用class就可以实现。

是的，我大多数情况下都使用class，但这段代码已经是由其他人在一个项目中编写的，我只需要在:hover时更换图标。如果我使用class，我就必须替换他们的样式。

解决方法是使用class来实现:hover效果，或者在行内样式中使用一些库来模拟:hover行为。

0
0 Comments

问题：如何在内联样式中应用hover效果？

原因：伪选择器在内联样式中不起作用。

解决方法：可以尝试使用Tailwindcss来实现此功能。具体操作可以参考Tailwindcss的文档：https://tailwindcss.com/docs/pseudo-class-variants/#app

0