Question

我在div中使用了三个图像。如果我将鼠标悬停在图像上，则图像应缓慢移动到左侧，细节应显示在右侧。

然后，如果光标移开，图像应移动到旧位置。

我的代码如下。

在Html中：

<ul class="ch-grid">
<li>
<div class="ch-item ch-img-1">
 <div class="ch-info">  </div>
</div>

 <div class="bioinfo">
    <h2>Details of the image initially it should hide</h2>
 </div>
</li>
</ul>

css文件

.ch-grid li .person-profile nav ul li {
    display: inline-block !important;
    height: 56px !important;
    margin: 0px !important;
    width: 36px !important;
}


.ch-img-1 { 
    background-image: url(../images/image.png);
}


.bioinfo {
    display: none;
    background: rgba(246,246,246, 0.8);
    font-size: 10px;
    padding: 15px 3px 3px 3px;
    text-align: justify;
}

Jquery的：

$('.ch-grid > li').hover(function() {
            $(this).css({position: 'relative', marginRight: 120});
            $(this).children('.bioinfo').show('slow').css({display: 'inline-block'});
}, function() {
     $(this).css({position: 'relative', marginRight: -10});
    $('.bioinfo').hide();

});

Answer 1

如果我理解正确，你应该做这样的事情。我已经更改了您正在使用的$(this)选择器，以便对要移动的元素稍微具体一些。我们选择的是遗留li的{{1}}，而不是整个.ch-item。

此外，li方法已更改为.hide() .show()。

在我们的动画中，我们可以将元素移回.fadeIn() and .fadeOut()，将元素返回到原始位置。我们可以这样做，因为元素相对定位，而不是绝对定位。如果您有任何问题，请告诉我们！

http://jsfiddle.net/2ZKG3/8/

0px

如果这不是您想要的效果，请告诉我。希望这有帮助！

Answer 2

$(this).animate({'left' : '-30px' }, 1000, function() { }); 使用动画。

如何在左侧移动图像以显示悬停时的细节

2 个答案: