<!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?type="text/css">
????body,p{
margin:0;
padding:0;
}
p{
background-color:red;
width:200px;
height:200px;
position:absolute;
transition:left?1s;
}
p:first-child{
opacity:1;
left:0;
}
p:nth-child(2){
opacity:0.7;
left:200px;
}
p:nth-child(3){
opacity:0.5;
left:400px;
}
p:nth-child(4){
opacity:0.3;
left:600px;
}
p:first-child:hover~p{
left:20px;
}
p:nth-child(2):hover+p:nth-child(n+2){
left:220px;
}
</style>
</head>
<body>
?????<div?class="wrap">
???????????<p></p>
???????????<p></p>
???????????<p></p>?
???????????<p></p>
?????</div>
</body>
</html>
1 回答
stone310
TA貢獻361條經驗 獲得超191個贊
p:nth-child(2):hover?~?p:nth-child(3){
????left:220px;
}
p:nth-child(2):hover?~?p:nth-child(4){
????left:220px;
}- 1 回答
- 0 關注
- 11668 瀏覽
添加回答
舉報
0/150
提交
取消