我在下一页使用名为capSlide的jquery脚本
http://sundial.whistlerwebhosting.com/meetings-events/whistler-weddings
当用户将鼠标悬停在图片上方时,顶部会显示一个透明的叠加层,并且标题会以标题和更多信息链接向上滑动。
我想让整个div区域可以点击。我在想,因为叠加层显示在它的顶部,我需要通过链接激活它。我试图使用以下jquery脚本,但它无法正常工作。
jQuery('.overlay').click(function(){
window.location=jQuery(this).parent().find('a').attr('href');
return false;
});
HTML输出如下
<div class="ic_wrapper">
<div id="capslide_img_cont11" class="ic_container"><img typeof="foaf:Image" src="/sites/all/themes/sundial/images/weddings/Wedding-Consulants.jpg" width="290" height="180" alt="Whistler Wedding Consulants" />
<div class="overlay" style="display:none;"></div>
<div class="ic_caption">
<h3>Wedding Consulants</h3>
<a href="/meetings-events/whistler-weddings/wedding-planners">
<p class="ic_text">More Info</p>
</a> </div>
</div>
</div>
任何见解都将受到高度赞赏
答案 0 :(得分:0)
我将假设您的点击事件未被注册,因为在脚本运行后添加了重叠div。尝试使用on()
或delegate()
jQuery函数。一个例子:
jQuery(".ic_container").on("click", ".overlay", function(){
window.location = jQuery(this).parent().find('a').attr('href');
return false;
});
答案 1 :(得分:0)
在脚本文件(functions.js)中,您将单击处理程序设置在文档就绪函数之外。相反,将置于准备好的功能中
jQuery(document).ready(function() {
jQuery('div#block-menu-menu-meeting-events-right.block div.content ul.menu li.last a').addClass('fancybox.iframe');
// Your code has been moved to here...
jQuery('.overlay').click(function(){
window.location=jQuery(this).parent().children().find('a').attr('href');
return false;
});
});
这使得它等到页面准备好后再应用你的点击处理程序。