Увеличить изображение при наведении

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

Вот как это сделать в 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-индексом. Или вы можете клонировать изображение, поместить его посередине с положением пользовательского интерфейса и использовать .attr () или .css (), чтобы изменить его размер.

Answer 3

вы должны сделать что-то вроде этого, поддерживая два изображения.

мы сделали несколько примеров, пожалуйста, измените имена соответственно

$('.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');

        });

Это решение позаботится о размытии изображения при увеличении высоты и ширины