JQuery将悬停效果应用于整个类

时间:2012-12-01 03:11:53

标签: jquery class hover effect

我遇到了问题,我无法在任何地方找到具体的答案。

我已经下载了一个JQuery插件,因为这是我的第一个java脚本尝试,我正在尝试将此缩放悬停效果应用于每个图像。 Insted它将整个类应用效果并对所有缩略图应用单个效果。

HTML

<div class="gallery">
   <a href="" class="thumb"><span><img src="images/1.png" alt="" /></span></a>
   <a href="" class="thumb"><span><img src="images/2.png" alt="" /></span></a>
   <a href="" class="thumb"><span><img src="images/3.png" alt="" /></span></a>
   <a href="" class="thumb"><span><img src="images/4.png" alt="" /></span></a>
</div>

CSS

.gallery {
   height: auto;
   padding-left: 0px;
   padding-right: 0px;
   margin-top: 200px;
}

.gallery li {
   padding-left: 10px;
   padding-right: 5px;
   padding-bottom: 5px;
   display:inline-block;
}

.gallery li a.thumb {
   width: 314px; 
   height: 177px;
   padding: 0px;
   cursor: auto;
}

JQuery

$(document).ready(function() {
   $('.gallery').hoverpulse().each(function() {
      var $img = $(this);
      var link = $img.attr('data-link');
      $img.attr('title','Goto: ' + link);
      $img.click(function() {
         window.open(link);
         return false;
      });
   });
});

1 个答案:

答案 0 :(得分:-1)

$(function() {
    $('.gallery img').hoverpulse().each(function() {
        var $img = $(this);
        var link = $img.attr('data-link');
        $img.attr('title','Goto: ' + link);
        $img.click(function() {
            window.open(link);
            return false;
        });
    });
});