我正在尝试一些需要使用伪a::hover::after的css样式,我假设如文档中所述,我可以这样做来使用hover伪:
a::hover::after
<Link _hover={{//styles here}}/>
在同样的意义上使用hover::after应该是这样的:
hover::after
<Link _hover_after={{//styles here}}/>
但是它似乎不起作用,而且我在文档中找不到关于这个特殊用法的线索。我如何在带有脉轮UI的React元素上使用伪::hover::after?
::hover::after
zsbz8rwp1#
我以前遇到过这个问题,但我找不到解决方案。但我使用isHovering状态做了一个变通方案,当onMouseOver事件将其设置为true,而onMouseLeave事件将其设置为false,并添加条件样式。请参见示例:
isHovering
onMouseOver
onMouseLeave
const LinkElement = () => { const [isHovering, setIsHovering] = useState(false); return <Link _after={ color: isHovering ? 'red' : 'blue' } onMouseEnter={() => setIsHovering(true)} onMouseLeave={() => setIsHovering(false)} /> }
1条答案
按热度按时间zsbz8rwp1#
我以前遇到过这个问题,但我找不到解决方案。但我使用
isHovering
状态做了一个变通方案,当onMouseOver
事件将其设置为true,而onMouseLeave
事件将其设置为false,并添加条件样式。请参见示例: