jquery - imgホバーJqueryでh1のテキストを変更する

Question

画像の上にカーソルを置いたときに H1 のコンテンツを変更できる Jquery/Javascript のスクリプトを探しています。

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').hide();
        $('h1').html(altimg);
        $('h1').fadeIn(300);
    });
    $('img').mouseout(function(){
        $('h1').fadeOut(300);
        $('h1').html('');
        $('h1').show();
    });
});

Answer 3

これを試して：

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