Javascript 当div悬停时，如何更改div内的文本？

我只是在我正在创建的一个网站上有这个部门，其中有一些文本

就像“示例”一样，一旦我将鼠标悬停在分区上，我希望文本变为“whatever”

我发现了这个论坛，但我真的不明白，有人能解释一下吗

---

使用事件侦听器

mouseover

进行尝试

document.querySelector（'div'）.addEventListener（'mouseover'，function（）{
this.innerHTML='Whatever'；
})

例子

用事件监听器

鼠标盖试试


document.querySelector（'div'）.addEventListener（'mouseover'，function（）{
this.innerHTML='Whatever'；
})

例子
如果不使用Javascript，简单的解决方案是：


div{
背景：番茄；
显示：内联块；
填充：6px 18px；
字体：16px无衬线；
颜色：#fff；
光标：指针；
}
分区跨度{
显示：无；
}
分区跨度：第一个孩子{
显示：内联块；
}
分区：悬停范围{
显示：内联块；
}
div:悬停范围：第一个孩子{
显示：无；
}

你好
世界
如果不使用Javascript，简单的解决方案是：


div{
背景：番茄；
显示：内联块；
填充：6px 18px；
字体：16px无衬线；
颜色：#fff；
光标：指针；
}
分区跨度{
显示：无；
}
分区跨度：第一个孩子{
显示：内联块；
}
分区：悬停范围{
显示：内联块；
}
div:悬停范围：第一个孩子{
显示：无；
}

你好
世界
在您共享的链接中，它们是CSS中使用的伪元素，并且已经有了答案。
请阅读以下内容以供参考：


在您共享的链接中，它们是CSS中使用的伪元素，并且已经有了答案。
请阅读以下内容以供参考：


另一个可能的答案是使用css伪选择器
：：before
和
：：after
，因为它们具有内容属性。像这样：


.hover me{背景：橙色；}
.hover me：：在{content:“Bleh.”之后
.hover me:hover:：在{content:“Blahargh！”}之后
另一个可能的答案是使用css伪选择器
：before
和
：：after
，因为它们具有内容属性。像这样：


.hover me{背景：橙色；}
.hover me：：在{content:“Bleh.”之后
.hover me:hover:：在{content:“Blahargh！”}之后