在这个代码中
<div class='wrapper'>
<div class='icon'>
<i className="fa fa-fw fa-globe" style={{ fontSize: '1.75em' }} />
</div>
</div>
每当用户将鼠标悬停在'icon' div上时,此代码
<i className="fa fa-fw fa-globe" style={{ fontSize: '1.75em' }} />
应该换成这个
<p> Lorem ipsum </p>
我可以实现改变风格,但不知道如何更换元素。请帮助我在这方面。
4条答案
按热度按时间50few1ms1#
与React中的大多数内容一样,您需要一个状态,例如:
当用户将鼠标悬停在图标上或图标外时,此状态需要更改:
然后,根据该状态确定应显示 * 什么 * 的逻辑:
您可能希望有两个单独的方法,一个用于
onMouseEnter
,另一个用于onMouseLeave
,而不是像我一样,两个都使用一个共享方法。哦,你还有个打字错误:您在一些地方写的是
class
而不是className
。演示
hmtdttj42#
除了@Chris的回答,如果你不想创建一个事件处理程序,那么你可以创建一个内联箭头函数来完成这项工作。
这只是你可以使用的一种简写。
rseugnpd3#
您需要将state与onMouseEnter和onMouseLeave事件一起使用
6za6bjd04#
这对我很有效: