Question

<ul>
    <li><img /></li>
    <li><img /></li>
    <li><img /></li>
    <li><img /></li>
    <li><img /></li>
</ul>

它是一个水平列表，不是垂直的。

当我们悬停在图片上时，我们如何放大其中一张图片？

Answer 1

http://jsfiddle.net/pfuWr/

ul img:hover {
    width: 180px;
    height: 150px;
}

您需要一种解决方法来支持IE6。

对于IE6，您可以尝试将图像包装在<a>中，并执行以下操作：

ul a:hover > img{
    width: 180px;
    height: 150px;
}

Answer 2

你应该通过维护两张图片来做这样的事情。

我们做了一些例子，请相应更改名称

$('.itemBox').bind('mouseenter',function(){
            $lrgImage = $(this).find('img');
            lrgImageSrc = $lrgImage.attr('src');
            bkImage = 'url(' + lrgImageSrc + ')';
            $(this).css('background-image',bkImage);
            $(this).css('background-position','center center');
            $lrgImage.fadeOut('fast');

        });
        $('.itemBox').bind('mouseleave',function(){
            $lrgImage = $(this).find('img');
            $(this).css('background-image','none');
            $lrgImage.fadeIn('fast');

        });

此解决方案将在增加高度和宽度时处理图像模糊

Answer 3

以下是如何在jquery中执行此操作：

$('li > img').mouseover(function(){
    $(this).css('width', '250px');
    $(this).css('height', '250px');
})
$('li > img').mouseout(function(){
    $(this).css('width', '200px');
    $(this).css('height', '200px');
})

这会破坏设计很多 - 你可能想要拍摄相同的图片并将其覆盖在不同z-index上的图像上。或者您可以clone使用UI position将图片放在中间，然后使用.attr（）或.css（）来更改图片。

悬停时放大图像

3 个答案: