零点987
2022-06-26 08:32
采纳率: 66.7%
浏览 19

html+css百叶窗的问题


<!DOCTYPE html>
<html>
    <head>
        <meta charset="utf-8">
        <title></title>
        <link rel="stylesheet" href="../css/jmqs.css">
    </head>
    <body>
        <h1 id="lll"></h1>
        <ul class="main">
            <li>
             <a href="kongwo.html"><img src="../img/1.png" alt=""></a>
             <div class="flag"></div>
            </li> 
            <li>
             <a href="build.html"><img src="../img/2.png" alt=""></a>
             <div class="flag"></div>
            </li> 
            <li>
             <a href="zio.html"><img src="../img/3.png" alt=""></a>
             <div class="flag"></div>
            </li> 
            <li>
             <a href="dianwang.html"><img src="../img/4.png" alt=""></a>
             <div class="flag"></div>
            </li> 
            <li>
             <a href="w.html"><img src="../img/5.png" alt=""></a>
             <div class="flag"></div>
            </li> 
            <li>
             <a href="amazons.html"><img src="../img/6.png" alt=""></a>
             <div class="flag"></div>
            </li> 
        </ul>
        </body>
</html>
*{
    padding: 0;
    margin: 0;
}
#lll{
    font-weight:bold;
    font-style: italic;
    font-family: STHupo;
    font-size: 500%;
}
ul li{
    list-style: none;
}
body{
    background-color: rgb(116, 106, 143);
}
.main{
    width: auto;
       height: 720px;
       margin:150px auto;
       overflow:hidden;
}
li{
    width: 160px;
    float: left;
    border-left:1px solid #fff;
    position: relative;
    transition: all 2s;
}
.flag{
    position: absolute;
    left: 0;
    bottom: 0;
    width: 100%;
    height: 60px;
    line-height: 60px;
    text-align: center;
    color: #fff;
    background: rgba(0, 0, 0, 5);
}
.main:hover li{
    width:150px;
}
.main:hover li{
    width:1280px;
}

本身我料想中的效果是鼠标放在哪个图片上哪个图片就展开到完全展示,其前后的图片都不展开,不知道为什么现在是只要放上去就全部展开,该怎么修改?

1条回答 默认 最新

相关推荐 更多相似问题