jquery - 调用 jquery animate() 后如何悬停

Question

我有以下代码可以在你悬停图像后放大图像:

   $(".myImage").hover(function () {
            $(this).find('img').stop() /* Add class of "hover", then stop animation queue buildup*/
                    .animate({
                        width: '560px', /* Set new width */
                        height: '174px', /* Set new height */
                        padding: '20px'
                    }, 200); /* this value of "200" is the speed of how fast/slow this hover animates */
        }, function () {
            $(this).find('img').stop()  /* Remove the "hover" class , then stop animation queue buildup*/
                .animate({
                    width: '140px', /* Set width back to default */
                    height: '44px', /* Set height back to default */
                    padding: '5px'
                }, 400);
        });

但问题是，当图像变大时，它会出现在 item 左侧的另一个图像(恰好是背景图像)后面。 .显示在这张图片上的另一张图片的 CSS 是:

 .otherImage {
background: url("/Content/Images/main1.png") repeat scroll 0 0 transparent;
display: block;
height: 506px;
margin-left: auto;
margin-right: auto;
margin-top: 30px;
position: relative;
width: 527px;
z-index: 0;

我怎样才能让调用动画的图像悬停在这个背景图像上？

这是调用动画的图像的原始 css(从 firebug 复制)

element.style {
display: inline-block;
height: 44px;
left: 0;
margin-left: 0;
margin-top: 0;
padding: 5px;
top: 0;
width: 140px;

.myImage img {
height: 44px;
width: 140px;
z-index: 999;

a img {
border: medium none;

Answer 1

如果您要设置动画的对象是position: absolute，那么您可以将它的z-index 设置为比其他对象更高的值，它会在顶部.

如果不是position: absolute，那么我们将不得不查看相关的 HTML 标记和这两个对象的所有 CSS 样式，以了解您的选择。