Question

我有几个div里面有一段文字作为内容。我想要它，这样当你将鼠标悬停在每个div上时，它会将内容从一个文本更改为另一个文本。我知道这可以通过JavaScript（jquery？）来完成，但我对它的经验非常有限，所以我们会对某些方向表示赞赏。

我有这样的事情：

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

我只想要＆＃34;这里是原文＆＃34;在div1中更改为其他内容，例如＆＃34;其他文本＆＃34;当鼠标悬停在包装器上时，当鼠标离开时返回原始文本。

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;
};

Answer 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 。

在mouseOver上更改div的内容

2 个答案: