javascript - 鼠标悬停时更改 DIV 内容

Question

我有一个用于内容显示的现有脚本。目前，当您单击链接时它会起作用。是否可以修改它以在鼠标悬停而不是单击时工作。

这是我的 fiddle :

HTML:

<a href="#" id="1"><div class="block"></div></a>
<a href="#" id="2"><div class="block"></div></a>
<a href="#" id="3"><div class="block"></div></a>

<div class="content"></div>

JavaScript:

$( document ).ready(function() {
    $('#1').click(); 
});

$('#1').click(function() {
  $('.content').html('This is a text example 1');
});

$('#2').click(function() {
  $('.content').html('This is a text example 2');
});

$('#3').click(function() {
  $('.content').html('This is a text example 3');
});

Answer 1

只需将 click() 更改为 mouseover();。

您也可以使用 mouseenter()。请参阅链接以获取更多说明 (link)。

DEMO

$( document ).ready(function() {
    $('#1').mouseover(); 
});

$('#1').mouseover(function() {
  $('.content').html('This is a text example 1');
});

$('#2').mouseover(function() {
  $('.content').html('This is a text example 2');
});

$('#3').mouseover(function() {
  $('.content').html('This is a text example 3');
});