                        课程
                    
                        /前端开发
                        
                            /JavaScript
                        
                        /JS+CSS3实现带预览图幻灯片效果

hover问题

img是属于a标签里面的，但是img占了位置，所以当鼠标移到设置了透明度的图片上还是有hover的作用，如何解决这个问题呢？如果用display：none的话又没有办法解决透明度的问题了。

接收中___

2015-12-09

源自：JS+CSS3实现带预览图幻灯片效果 2-3

关注问题我要回答

1005

操作

收起

3 回答

xtaotao
2015-12-19

使用z-index

.slider .ctrl .ctrl-i img{
	width:100%;
	position:absolute;
	bottom:50px;
	left:0px;
	opacity: 0;
	z-index: -1;
	-webkit-transition:all .2s;
}

.slider .ctrl .ctrl-i:hover img{	
	bottom:13px;

	-webkit-box-reflect:below 0px -webkit-gradient(
		linear,
		left top,
		left bottom,
		from(transparent),
		color-stop(50%,transparent),
		to( rgba(255,255,255,0.3) )
	);
	opacity: 1;
	z-index: 0;
}