如何只訪問被鼠標懸停的圖像

-1

我猜測這個關鍵字需要一行更改，但是我嘗試了一些不能按預期工作的東西。我試圖做的是我有圖像在網格中。一旦我將鼠標懸停在一張圖片上，它就需要展開。我可以得到這個效果，但是當我將鼠標移到一張圖片上時，所有圖片都在膨脹。我需要告訴我的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>

來源

2015-02-06 Bale

使用變量$ IMG = $（ 'IMG'）工作的代碼;在側面的mouseenter事件中，並寫下面的代碼 var $ img = $（this）.find（'img'）; – 2015-02-06 05:58:22

檢查我把你的代碼放在jsfiddle上 http://jsfiddle.net/tsydav8n/1/ – 2015-02-06 06:04:24

使用變量$ IMG = $（ 'IMG'）;在側面的mouseenter事件中，寫下面的代碼var $ img = $（this）.find（'img'）;

檢查出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' 


     }); 

    }); 
});

來源

2015-02-06 06:08:34

需要更多信息：它的工作正常，但如果連續兩個圖像鼠標都展開。只有一個圖像需要展開時間。 – Bale 2015-02-06 06:47:17

可能是jquery動畫幫助你..看到文檔 http://api.jquery.com/animate/ – 2015-02-06 06:50:59

謝謝非常多:) – Bale 2015-02-06 06:57:10

如何只訪問被鼠標懸停的圖像

回答

相關問題