Jquery 如何仅访问鼠标覆盖的图像_Jquery_Html

Jquery 如何仅访问鼠标覆盖的图像

jquery html

Jquery 如何仅访问鼠标覆盖的图像,jquery,html,Jquery,Html,我猜这个关键字需要更改一行，但我尝试了几行，但都没有达到预期效果。我想做的是我的图像在网格中。一旦我将鼠标移到一个图像上，它就需要展开。我可以得到效果，但当我将鼠标移到一个图像上时，所有图像都在展开。我需要告诉我的jquery仅访问一个图像鼠标覆盖的图像代码如下： <script type="text/javascript"> $(function() { var $container = $('#ib-container'),

我猜这个关键字需要更改一行，但我尝试了几行，但都没有达到预期效果。我想做的是我的图像在网格中。一旦我将鼠标移到一个图像上，它就需要展开。我可以得到效果，但当我将鼠标移到一个图像上时，所有图像都在展开。我需要告诉我的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>


$（函数（）{
var$container=$（“#ib container”），
$articles=$container.children（'article'），
超时；
变量$img=$（'img'）；
$articles.on（'mouseenter'，函数（事件）{
var$article=$（本）；
clearTimeout（超时）；
$img.css（{
高度：“300px”，
宽度：“620px”
timeout=setTimeout（函数（）{
if（$article.hasClass（'active'））返回false；
$articles.not（$article.removeClass（'blur'）。addClass（'active'））
.removeClass（'活动'）
.addClass（“模糊”）；
}, 65 );
});
$container.on（'mouseleave'，函数（事件）{
clearTimeout（超时）；
$articles.removeClass（'activeblur'）；
$img.css（{//调整图像大小
高度：“165px”，
宽度：“165px”
});
});

这是我的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>

在侧边鼠标事件中使用var$img=$（'img'）；并在下面写入代码var$img=$（this）。查找（'img'）

查看上的工作代码

使用var$img=$（'img'）；在side mouseenter事件中，并在下面编写代码var$img=$（此）。查找（'img'）；检查我是否已将您的代码放在JSFIDLE上需要更多信息：它工作正常，但如果连续两个图像被鼠标覆盖，则两个图像都会展开。一次只需展开一个图像。非常感谢：）同时检查这个更新的代码。这是你想要的。是的，刚刚检查过，看起来很完美，非常感谢你的努力。不知道谁投了反对票。我也放弃了投票，这也是缺失的。

$(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'


        });

    });
 });