在img悬停Jquery上更改h1中的文本

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

尝试使用带有回调的hover。

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

Answer 2

试试这个：

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

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