active 没效果啊,代码查了几次都找不到问题,麻烦各位大神帮我看看。
<!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=utf-8" />
<title>无标题文档</title>
<style>
*{ padding:0; margin:0;}
body{ padding:50px 0; background-color:#fff; font-size:14px; 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:40px; 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; background-color:#b5b5b5;
}
.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 .2s;
}
.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;
}
</style>
</head>
<body>
<div class="slider">
<div class="main">
<div class="main-i">
<div class="caption">
<h2>h2 caption</h2>
<h3>h3 caption</h3>
</div>
<img src="file:///C|/Users/Administrator/Documents/未命名站点 2/1.jpg" />
</div>
<div class="main-i">
<div class="caption">
<h2>h2 caption</h2>
<h3>h3 caption</h3>
</div>
<img src="file:///C|/Users/Administrator/Documents/未命名站点 2/1.jpg" />
</div>
</div>
<div class="ctrl">
<a class="ctrl-i" href="javascript:;"><img src="file:///C|/Users/Administrator/Desktop/网页练习/image/1.jpg"</a><a class="ctrl-i" href="javascript:;"><img src="file:///C|/Users/Administrator/Desktop/网页练习/image/1.jpg"</a>
</div>
</div>
</body>
</html>