我想在我的HTML模板列表中的StackOverflow(jQuery image hover color overlay)上使用jQuery效果。效果起作用,但不幸的是,鏈接不再點擊進入下一頁。jQuery點擊疊加效果
的HTML標記是...
<ul class="rollover-effect">
<li><a href="page.html"><img src="image.jpg" alt="Image Title" /></a></li>
<li><a href="page.html"><img src="image.jpg" alt="Image Title" /></a></li>
<li><a href="page.html"><img src="image.jpg" alt="Image Title" /></a></li>
</ul>
...和我的jQuery的讀取...
jQuery('ul.rollover-effect a').bind('mouseover', function(){
jQuery(this).parent('li').css({position:'relative'});
var img = jQuery(this).children('img');
jQuery('<div />').text(' ').css({
'height': img.height(),
'width': img.width(),
'background-color': 'black',
'position': 'absolute',
'top': 0,
'left': 0,
'opacity': 0.0,
'cursor': 'pointer'
}).bind('mouseout', function(){
jQuery(this).fadeOut(200, function(){
jQuery(this).remove();
});
}).insertAfter(this).animate({
'opacity': 0.40
}, 200);
});
任何人都可以看到或他們知道這可能是爲什麼?我希望能夠點擊進入下一頁。它在擾亂我!謝謝。
它是否必須在'a'之上?如果不是,請將覆蓋層設置爲「z-index:1」,將「a」設置爲「z-index:2」 – Andy