在h1上更改img hover中的文本Jquery

Question

我正在尋找JQuery/Javascript中的腳本，可以在鼠標懸停在圖像上時更改H1的內容。

想象一下有6個不同的圖像連續。當懸停在圖像上時，會發生h1的變化。

這是最接近我可以得到的，但我希望它能夠在懸停，而不是點擊。

var random = Math.floor(Math.random() * 1000); 
var $li = $("#gallery li"); 

$li.eq(random % $li.length).addClass("on"); 
$("h1").text($("img", ".on").attr("alt")); 
$("#gallery li").click(function() { 
    $("#gallery li").removeClass("on"); 
    $(this).addClass("on"); 
    $("h1").text($("img", ".on").attr("alt")); 
}); 

Answer 1

試試這個：

$(document).ready(function(){ 
    $('img').mouseover(function(){ 
     var altimg = $(this).attr('alt'); 
     $('h1').html(altimg); 
    }); 
    $('img').mouseout(function(){ 
     $('h1').html(''); 
    }); 
}); 

Answer 2

嘗試使用hover與回調。

$("#gallery li").on('hover', function(e) { 
    $("h1").text('Hovered'); 
}, function() { 
    $("h1").text('back to whatever'); 
}); 

Answer 3

淡入效果

：

$(document).ready(function(){ 
    $('img').mouseover(function(){ 
     var altimg = $(this).attr('alt'); 
     $('h1').hide(); 
     $('h1').html(altimg); 
     $('h1').fadeIn(300); 
    }); 
    $('img').mouseout(function(){ 
     $('h1').fadeOut(300); 
     $('h1').html(''); 
     $('h1').show(); 
    }); 
});