                        課程
                    
                        /前端開發
                        
                            /JavaScript
                        
                        /JS+CSS3實現帶預覽圖幻燈片效果

hover問題

img是屬于a標簽里面的，但是img占了位置，所以當鼠標移到設置了透明度的圖片上還是有hover的作用，如何解決這個問題呢？如果用display：none的話又沒有辦法解決透明度的問題了。

接收中___

2015-12-09

源自：JS+CSS3實現帶預覽圖幻燈片效果 2-3

關注問題我要回答

983

操作

收起

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;
}