< 
      
        
      
        > 
      
     
 关键是下面 

CSS代码

*{        margin: 0px;        padding: 0px;    }    .outor{        width: 700px;        height: 400px;        margin: 100px auto;        position: relative;    }    .img a img{        width: 700px;        height: 400px;    }    .img li{        position: absolute;        left: 0px;        list-style: none;    }    .btn{        position: absolute;        left: 220px;        top: 350px;        color: red;    }    .btn li{        display: inline-block;        list-style: none;        width: 20px;        height: 20px;        text-align: center;        line-height: 20px;        margin-left: 15px;        background-color: white;        border-radius: 50%;    }    .button{        position: absolute;        width: 35px;        height: 50px;        background-color: grey;        font-size: 30px;        font-weight: bolder;        color: white;        text-align: center;        line-height: 50px;        opacity: 0.6;        display: none;    }    .btn_left{        top: 175px;        left: 0px;    }    .btn_right{        right: 0px;        top: 175px;    }    .outor:hover .button{        display: block;    }    .background_color{        background-color: red;    }