Question

我猜这个关键字需要进行一行更改，但我尝试了一些未能按预期工作的。我想要做的是我有网格中的图像。一旦我将鼠标悬停在一个图像上它需要扩展。我可以得到效果，但当我鼠标悬停在一个图像上时，所有图像都在扩展。我需要告诉我的jquery只能访问鼠标图像。

以下是代码：

    <script type="text/javascript">
        $(function() {

            var $container  = $('#ib-container'),
                $articles   = $container.children('article'),
                timeout;
                var $img = $('img'); 

            $articles.on( 'mouseenter', function( event ) {

                var $article    = $(this);
                clearTimeout( timeout );
                 $img.css({ 
 height: '300px',
 width: '620px'



                timeout = setTimeout( function() {

                    if( $article.hasClass('active') ) return false;

                    $articles.not( $article.removeClass('blur').addClass('active') )
                             .removeClass('active')
                             .addClass('blur');

                }, 65 );

            });

            $container.on( 'mouseleave', function( event ) {

                clearTimeout( timeout );
                $articles.removeClass('active blur');
                                     $img.css({ // resize the image
 height: '165px',
 width: '165px'


            });

        });
    </script>

这是我的HTML：

<html>
<body>

<section class="ib-container" id="ib-container">
                <article>
                    <header>
                        <h3><a target="_blank" href="Images/thumb/1_thumb.jpg"><img src="Images/main/1.jpg" width="165px" height="165px"><figcaption><em>Overview of Andaman</em></figcaption></figure></a></h3>

                    </header>

                </article>
                <article>
                    <header>
                        <h3><a target="_blank" href="Images/main/1.jpg"><img src="Images/main/1.jpg"><figcaption><em>Overview of Andaman</em></figcaption></figure></a></h3>
                    </header>

                </article>
                <article>
                    <header>
                        <h3><a target="_blank" href="Images/main/1.jpg"><img src="Images/main/1.jpg"><figcaption><em>Overview of Andaman</em></figcaption></figure></a></h3>
                    </header>
                </article>
                <article>
                    <header>
                        <h3><a target="_blank" href="Images/main/1.jpg"><img src="Images/main/1.jpg"><figcaption><em>Overview of Andaman</em></figcaption></figure></a></h3>
                    </header>
                </article>

            </section>
</body>
</html>

Answer 1

使用var $ img = $（＆＃39; img＆＃39;）;在side mouseenter事件中并写下代码var $ img = $（this）.find（＆＃39; img＆＃39;）;

查看jsfiddle

上的工作代码

$(function() {

        var $container  = $('#ib-container'),
            $articles   = $container.children('article'),
            timeout;
            var $img 

        $articles.on( 'mouseenter', function( event ) {
            $img = $(this).find('img'); 
            //alert($img .attr('src'));
            var $article    = $(this);
            clearTimeout( timeout );
             $img.css({ 
              height: '300px',
              width: '620px'
        });


            timeout = setTimeout( function() {

                if( $article.hasClass('active') ) return false;

                $articles.not( $article.removeClass('blur').addClass('active') )
                         .removeClass('active')
                         .addClass('blur');

            }, 65 );


        });
        $container.on( 'mouseleave', function( event ) {

            clearTimeout( timeout );
            $articles.removeClass('active blur');
                                 $img.css({ // resize the image
      height: '165px',
     width: '165px'


        });

    });
 });

如何仅访问鼠标悬停的图像

1 个答案: