1
我一共有3個div。 一個div總是出現,但當鼠標進入div1時,剩餘的兩個div將出現。這是一個使用jQuery的演示。移動div無法正常工作
Demo使用jQuery
但它不工作正常。 當動畫完成時出現錯誤功能時鼠標進入/退出。所以我嘗試了CSS3,但動畫不能正常工作。使用CSS演示。使用CSS
這裏
Demo是代碼:
的Html:
<div class='holder'>
<div class="menu" id="m1"></div>
<div class="menu" id="m2"></div>
<div class="menu" id="m3"></div>
</div>
CSS:
.menu {
top:10px;
margin: 0;
padding:0px;
width: 40px;
height:40px;
border-radius: 100%;
display: inline-block;
background-color: #34495e;
transition: 1s;
position: absolute;
}
#m1 {
z-index: 1000;
}
#m2, #m3 {
z-index: 1;
}
.menu:hover {
background-color: #3498db;
}
.menu:hover ~ div:nth-child(3n), .menu:hover ~ div:nth-child(2n){
position:relative;
left: 50px;
margin-left: 10px;
}
如何解決probem?我如何通過適當的動畫和鼠標事件移動div?
我想搬到#2和#立方米只有一次。從第二次開始,他們就不應該失敗。 – SGG 2015-03-31 10:56:25
是的,我想是因爲'marginLeft'中的'+':「+ = 45px」' – SGG 2015-03-31 11:26:05