在 mouseOver 上更改 div 的内容答案

【问题标题】：Changing a div's contents on mouseOver在 mouseOver 上更改 div 的内容
【发布时间】：2014-10-19 00:31:07
【问题描述】：

我有几个 div，其中包含一段文本作为内容。我想要它，这样当您将鼠标悬停在每个 div 上时，它会将内容从一个文本更改为另一个文本。我知道这可以用 JavaScript (jquery?) 来完成，但我对它的经验非常有限，所以希望能提供一些指导。

我有这样的事情：

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

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

【问题讨论】：

标签： javascript jquery hover jquery-hover mousehover

【解决方案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;
};

【讨论】：

我认为 OP 正在寻找 jQuery 解决方案。因此，他/她添加的数百万个标签与“jQuery”密切相关。
@chrisjlee 他没有明确排除纯 JavaScript，但您可能是对的。就跨浏览器兼容性而言，jQuery 变体也更可取。

【解决方案2】：

// store element to avoid overhead on each event
var $div1 = $('#div1');

// keep the current text
$div1.data('old_text', $div1.text());

$('#wrapper')
    .on('mouseenter', function() {
        $div1.text('Another text');
    })
    .on('mouseleave', function() {
        $div1.text($div1.data('old_text'));
    });

这是一个demo。

【讨论】：