javascript - 在 mouseOver 上更改 div 的内容

Question

我有几个 div，里面有一段文字作为内容。我想要它，以便当您将鼠标悬停在每个 div 上时，它会将内容从一个文本更改为另一个文本。我知道这可以用 JavaScript(jquery？)来完成，但我的经验非常有限，所以一些方向将不胜感激。

我有这样的东西:

div id="wrapper">
    <div id="div1">
    Here's the original text.
    </div>
</div>

我只是希望 div1 中的“这是原始文本”在鼠标悬停在 wrapper 上时更改为其他内容，例如“其他文本”，并在鼠标离开时返回原始文本。

Answer 1

像这样应该可以完成工作。虽然没有测试跨浏览器兼容性。

var defaultText = document.getElementById('div1').innerHTML;

document.getElementById('div1').onmouseenter = function() {
    this.innerHTML = "some other text";
};

document.getElementById('div1').onmouseleave = function() {
    this.innerHTML = defaultText;
};