Question

当鼠标悬停在图像上时，我需要更改许多图像。我尝试一个但只更改一个图像如何在图像上悬停时更改许多图像。我试试fiddle

HTML：

<div id="container">
<div class="fimg"><a href="#"><img height="130px" width="100%" src="a.jpg" alt="" /></a>
</div> <div class="simg"> 
<a href="#"><img height="130px" width="100%" src="A.jpg" alt="" /><p class="text_over_image" style="font-size:36px;">TEXT</p></a>
</div>

使用Javascript：

 $(function(){
    $("#container").hover(function(){
        $("img", this).stop().animate({top:"-130px"},{queue:false,duration:200});
    }, function() {
        $("img", this).stop().animate({top:"0px"},{queue:false,duration:200});
    });
});

Answer 1

如果我正确理解了您的问题，那么当您将鼠标悬停在container上时，您需要一个图片滑块。

图像采用内嵌块，它们设置为white-space: nowrap。所以，他们不会包装。 container设置为overflow: hidden，它会隐藏额外的图片。

通过动画内部div的margin-left来显示图像。因此，就像内部容器正在移动但容器保持静止。

你可以随意修改它，垂直动画，使用css过渡和东西。

由于缩短了图片的网址，我无法在此处发布代码。

您可以测试和修改它here，它是一支笔。

图像更改onHover jquery

1 个答案: