老师请问一下

来源：1-13 作业题

远小远

2019-01-06 18:49:29

<!DOCTYPE html>
<html>
<head>
    <meta charset="UTF-8" />
    <title>轮播图</title>
    <link rel="stylesheet" type="text/css" href="css/index.css">
</head>
<body>
    <!--主体区域-->
    <div class="main">
        <!--轮播图区域-->
        <div class="banner">
            <a href="#">
                <img src="img/1.jpg" class="banner-slide slide-active">
            </a>
            <a href="#">
                <img src="img/2.jpg" class="banner-slide">
            </a>
            <a href="#">
                <img src="img/3.jpg" class="banner-slide">
            </a>
            <a href="#">
                <img src="img/4.jpg" class="banner-slide">
            </a>
            <a href="#">
                <img src="img/5.jpg" class="banner-slide">
            </a>
        </div>
        <!--上一张，下一张按钮-->
        <div class="btn pre"></div>
        <div class="btn next"></div>
        <!--圆点按钮-->
        <div class="dots">
            <span class="active"></span>
            <span></span>
            <span></span>
            <span></span>
            <span></span>
        </div>
    </div>
</body>
</html>

/*清除默认样式*/
*{
    margin:0;
    padding:0;
}
body{
    font-family: "微软雅黑";
    color:#14191e;
}
ul li{
    list-style: none;
}

/*图片轮播样式*/
.main{
    width:1200px;
    height: 460px;
    border:10px solid #bbb;
    margin:150px auto;
    overflow: hidden;
    position:relative;
}
.banner{
    width:1200px;
    height:460px;
    overflow:hidden;
    position: relative;
}
.banner-slide{
    width: 1200px;
    height:460px;
    display: none;
    background-repeat: no-repeat;
    position: absolute;
}
.banner .slide-active{
    display:block;
}

/*上一张，下一张按钮样式*/
.btn{
    width: 40px;
    height:80px;
    position:absolute;
    top:50%;
    margin-top:-40px;
}
.btn:hover{
    background:#333;
    opacity: 0.6;
    filter:alpha(opacity:60);
}
.pre{
    background: url(../img/pre2.png) no-repeat center center;
}
.next{
    right:0;
    background: url(../img/pre.png) no-repeat center center;
}

老师我设置默认样式的时候鼠标滑过的那个效果为啥直接把图标给覆盖了呀

写回答

2回答