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

Answer 2

是。将click()替换为mouseover()

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

 $('#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');
});

Answer 3

您只需将 click（）替换为 mouseover（）：

$( 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');
});

Answer 4

是的，只需用.hover（）或.mouseover（）（See the difference between hover and mouseover）替换.click（）：

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

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

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

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

您可以在此处查看Jsfiddle

的工作原理

Answer 5

您的代码有一些不推荐使用的函数问题，如果使用最新版本的jQuery会显示错误（SyntaxError：使用// @表示sourceMappingURL编译指示已弃用。请改用//＃）

将其更改为：

$(document).ready(function() {
    $('#1, #2, #3').mouseover(function(evt) {
        $('.content').html('This is a text example' + evt.currentTarget.id);
    });
});

鼠标悬停时更改DIV内容

5 个答案: