求解惑，为什么显示状态没有效果，就是显示时底部的颜色没变化
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 | *{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;} |
