Блог

это мой код jQuery

 $("ul .thumb li").hover(function () {
            debugger;
            $(this).css({ 'z-index': '10' });
            $(this).find('img').addClass("hover").stop().animate({
                marginTop: '-110px',
                marginLeft: '-110px',
                top: '50%',
                left: '50%',
                width: '174px',
                height: '174px',
                padding: '20px'
            }, 500);

        }, function () {
            $(this).css({ 'z-index': '0' });
            $(this).find('img').removeClass("hover").stop().animate({
                marginTop: '0',
                marginLeft: '0',
                top: '0',
                left: '0',
                width: '100px',
                height: '100px',
                padding: '5px'
            }, 500);
        });
  

Это мой CSS

  ul.thumb
        {
            float: left;
            list-style: none;
            margin: 0;
            padding: 10px;
            width: 360px;
        }
        ul.thumb li
        {
            margin: 0;
            padding: 5px;
            float: left;
            position: relative;
            width: 110px;
            height: 110px;
        }
        ul.thumb li img
        {
            width: 100px;
            height: 100px;
            -ms-interpolation-mode: bicubic;
            border: 1px solid #ddd;
            padding: 5px;
            background: #f0f0f0;
            position: absolute;
            left: 0;
            top: 0;
        }
        ul.thumb li img.hover
        {
            background: url(homePageImage.png) no-repeat center center;
        }
  

это моя разметка

 <ul class="thumb">
        <li><a href="#">
            <img src="images/att.jpg" alt="" /></a></li>
        <li><a href="#">
            <img src="images/images (10).jpg" alt="" /></a></li>
        <li><a href="#">
            <img src="images/nintendo.jpg" alt="" /></a></li>
        <li><a href="#">
            <img src="images/images (11).jpg" alt="" /></a></li>
        <li><a href="#">
            <img src="images/images (13).jpg" alt="" /></a></li>
        <li><a href="#">
            <img src="images/images (14).jpg" alt="" /></a></li>
        <li><a href="#">
            <img src="images/images (3).jpg" alt="" /></a></li>
        <li><a href="#">
            <img src="images/images (4).jpg" alt="" /></a></li>
        <li><a href="#">
            <img src="images/images (3).jpg" alt="" /></a></li>
    </ul>
  

Изображения должны увеличиваться при наведении курсора мыши, но ничего не происходит! помощь приветствуется.

Это ul.thumb .

ul .thumb выбирает любых потомков любого ul , у которого есть thumb класс. Вы хотели выбрать ul s с thumb классом.

Пример того, как это работает (вроде как)

Измените свой селектор на

 $("ul.thumb li").hover(function () {
  

Это должно решить проблему