当前位置：首页 → 问答吧 → jq让图片（fadeIn）渐显，ie下连接不能点击

jq让图片（fadeIn）渐显，ie下连接不能点击

时间：2009-06-04

来源：互联网

复制代码

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=gb2312" />
<title>无标题文档</title>
<style type="text/css">
img{border:0}
a{ position:relative; float:left;top:20px;left:20px; clear:both}
a img{ border:1px #ccc solid; padding:2px}
span{ position:absolute;top:-10px;left:-10px; float:left;width:53px; height:90px; display:none}
a:hover{ background:#fff}
</style>
</head>
<body>
<div class="imgs">
<a href="http://blueidea.com" target="_blank"><img src="http://bbs.jquery.org.cn/p_w_upload/2_17971_674fd1b9826382d.jpg" alt="blueidea"/><span><img src="http://bbs.jquery.org.cn/p_w_upload/2_17971_7bc59b39b6fd421.jpg" alt="blueidea"/></span></a>
</div>
<script src="http://jqueryjs.googlecode.com/files/jquery-1.3.min.js" type="text/javascript"></script>
<script type="text/javascript">
jQuery.noConflict();
jQuery(
function(){
jQuery(".imgs > a").mouseover(function(){
jQuery("span",this).stop();
jQuery("img",this).not("span > img").stop();
jQuery("img",this).not("span > img").fadeTo("slow", 0);
jQuery("span",this).css({display:'block',opacity:'0'});
jQuery("span",this).fadeTo("slow", 1);
}
);
jQuery(".imgs > a").mouseout(function(){
jQuery("span",this).stop();
jQuery("img",this).not("span > img").stop();
jQuery("span",this).css({display:'none'});
jQuery("img",this).not("span > img").fadeTo("slow", 1);
})
})
</script>
</body>
</html>

jq刚学着用，出现这个问题，谁帮忙看下，谢谢啊

图片:

ie的bug，经测试当内嵌元素设置了position或float属性时会挡住外围的a标签

修正方法是将这个元素的z-index设为负的，不过其他浏览器不需要，所以用*z-index:-1;

span{ *z-index:-1;position:absolute;top:-10px;left:-10px; float:left;width:53px; height:90px; display:none}

此外，既然已经position:absolute了，就没必要float:left了

作者: kouyubo 发布时间: 2009-06-04

jq让图片（fadeIn）渐显，ie下连接不能点击

热门阅读

热门下载