如何實現讓 “div2” 與 “move” 同時移動時，“div2” 始終保持在 “move” 上面<!DOCTYPE html><head><meta charset="utf-8"><title></title><style rel="stylesheet" type="text/css">#div1{background-color: #000000;width: auto;height: 200px;transition: all 2s;}#div1:hover{transform:translate(0,100px);}#div2{background-color: red;width: 200px;height: 200px;transition:all 3s;}#div2:hover{transform: translate(650%,0);}#move:hover{transform: translate(90%,0);}#move{width: 500px;height: 200px;transition: all 3s;background-color: #333333;float: left;}#div3{width: auto;height: 200px;background-color: green;transition:all 3s;clear: both;}#div5:hover{transform: translate(0,100px);background-color: yellow;}</style></head><body><div id="div1"></div><div id="move"></div><div id="div2"></div><div id="div3"></div></body></html>
1 回答
拉風的咖菲貓
TA貢獻1995條經驗 獲得超2個贊
這是你希望的效果嗎：
<style rel="stylesheet" type="text/css"> #div1 { background-color: #000000; width: auto; height: 200px; transition: all 2s; } #div1:hover { margin-top: 100px; } #div2 { background-color: red; width: 200px; height: 200px; transition: all 3s; float: left; margin-left: -500px; } #div2:hover { transform: translate(650%, 0); } #move:hover { transform: translate(90%, 0); } #move { width: 500px; height: 200px; transition: all 3s; background-color: #333333; float: left; } #div3 { width: auto; height: 200px; background-color: green; transition: all 3s; clear: both; } #div5:hover { transform: translate(0, 100px); background-color: yellow; } </style> |
- 1 回答
- 0 關注
- 165 瀏覽
添加回答
舉報
0/150
提交
取消