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

求解惑，为什么显示状态没有效果，就是显示时底部的颜色没变化

*{margin:0;padding:0;}
		body{padding:0px 0;background-color: #fff;font-size: 14px;font-family: 'Avenir Next';color: #555;-webkit-font-smoothing:antialiased;}
		.slider .main .main-i,.slider .main,.slider{width: 100%;height: 400px;position: relative;}
		.slider .main{overflow: hidden;}
		.slider .main .main-i{}
		.slider .main .main-i img{width: 100%;position: absolute;left: 0;top:0;z-index: 1;}
		.slider .main .main-i .caption{position: absolute;right: 50%;top:30%;z-index: 9;}
		.slider .main .main-i .caption h2{font-size: 50px;line-height: 50px;color: #B5B5B5;text-align: right;}
		.slider .main .main-i .caption h3{font-size: 70px;line-height: 70px;color: #000000;text-align: right;}
		.slider .ctrl{width: 100%;height: 13px;line-height: 13px;text-align: center;position: absolute;left: 0;bottom: -13px;}
		.slider .ctrl .ctrl-i{display: inline-block;width: 150px;height: 13px;background-color: #666;box-shadow: 0 1px 1px rgba(0,0,0,.3);position: relative;margin-left: 1px;}
		.slider .ctrl .ctrl-i img{width:100%;position: absolute;left: 0;bottom: 50px;z-index: 1; opacity: 0;transition: all 0.3s ease;}
		.slider .ctrl .ctrl-i:hover{background-color: #F0F0F0;}
		.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,.3) )
										);
									opacity: 1;
								}
		.slider .ctrl .ctrl-i_active:hover,.slider .ctrl .ctrl-i_active{background-color: #000;}
		.slider .ctrl .ctrl-i_active:hover img{opacity:0;}