<!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;
}
本身我料想中的效果是鼠标放在哪个图片上哪个图片就展开到完全展示，其前后的图片都不展开，不知道为什么现在是只要放上去就全部展开，该怎么修改？
css 裡面是 所有 “符合條件“ 的都會做。
可以測試每一個 li 的設定分開。