Question

我在Jquery / Javascript中寻找可以在悬停在图像上时更改H1内容的脚本。

想象一下，连续有6张不同的图像。当悬停在图像上时，会发生h1的变化。

这是我能得到的最接近的，但我想让它在Hover上工作，而不是点击。

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

更改图像上的h1中的文本悬停Jquery

3 个答案: