鼠標懸停時更改DIV內容

Question

我有一個用於內容顯示的現有腳本。 當前，當您單擊鏈接時它可以工作。 是否可以對其進行修改以使其在鼠標懸停而不是單擊時起作用。

這是我的小提琴 ：

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() 。 請參閱鏈接以獲取更多說明（ 鏈接 ）。

演示

$( 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

是。 用mouseover()替換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

是的，只需將.click（）替換為.hover（）或.mouseover（）（ 請參閱hover和mouseover之間的區別 ）：

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