Question

我正在尝试将jQuery Tools叠加层与一些简单的代码结合起来，尽管叠加层不起作用。

我有几个div容器，如下所示。我完成了每个功能并添加“右边距：0”并清除每三个项目。


<div class="essay-thumb">
 <a href="link.html"><img src="src.jpg" alt="Alt text" width="210" height="140" /></a>
 <h5>Header Text h5</h5>
</div>
<div class="essay-thumb">
 <a href="link2.html"><img src="src2.jpg" alt="Alt text 2" width="210" height="140" /></a>
 <h5>Header Text h5 2</h5>
</div>
...


$('.essay-thumb').each(function(i){
 if ( ((i+1)%3) == 0 ) {
  $(this).css('margin-right', 0).after('<br class="clear" />');
 }
})

在这里，我添加了rel属性，在img中获取alt属性的内容，并将其添加到＆lt; span class =“tooltip”＆gt;＆lt; p＆gt; ...＆lt; / p＆gt;＆lt; p＆gt; ...＆lt; / p＆gt;＆lt; ; /跨度＆GT;标记，通过css将不透明度设置为0。


$('#content .essay-thumb').each(function(i){
 $(this).find('a').attr('rel', '#modal'+(i+1) );
 var title = $(this).find('img').attr('alt');
 var link = $(this).find('a').attr('href');
 $('<span class="tooltip"><\/span>').appendTo($(this))
 $('<p><\/p>').text(title).appendTo($(this).find('.tooltip'));
})

然后我在悬停时将不透明度设置为0.8并返回到0


$('#content .essay-thumb').hover(function(e) {
  $(this).find('.tooltip').stop().animate({opacity: .8}, 500);
 }, function () { 
  $(this).find('.tooltip').stop().animate({opacity: 0}, 200);
 })

最后我有一条线来触发点击叠加。这不起作用，我想知道为什么？据我所知，叠加事件未附加到相关的标签。任何帮助都非常感谢。


$("#content .essay-thumb a[rel]").overlay({ expose: '#000', effect: 'apple' });

jquery工具覆盖问题/冲突

0 个答案: