懸停時的菜單驅動效果

Question

我正在創建一個效果，當你將鼠標懸停在.hoverarea類上時， .sociallink1 、 .sociallink2等將像驅動效果一樣切換，但我的代碼不起作用

當我只添加2px時，每個.sociallink1等都會自動添加額外的邊距

以下是我的代碼

 * { margin: 0; padding: 0; } .sociallink1 { background-color: blueviolet; cursor: pointer; width: 200px; height: 50px; color: white; text-align: center; font-size: 40px; } .sociallink2 { background-color: blueviolet; cursor: pointer; width: 200px; height: 50px; color: white; text-align: center; font-size: 40px; margin: 2px 0 0 0; } .sociallink3 { background-color: blueviolet; cursor: pointer; width: 200px; height: 50px; color: white; text-align: center; font-size: 40px; margin: 2px 0 0 0; } .sociallink4 { background-color: blueviolet; cursor: pointer; width: 200px; height: 50px; color: white; text-align: center; font-size: 40px; margin: 2px 0 0 0; } .sociallink5 { background-color: blueviolet; cursor: pointer; width: 200px; height: 50px; color: white; text-align: center; font-size: 40px; margin: 2px 0 0 0; } .container { margin: 100px 0 0 0; } .hoverarea { background-color: black; width: 50px; height: 50px; position: relative; left: 200px; top: -50px; color: white; font-size: 40px; text-align: center; cursor: pointer; } .link1 { // position:relative; left: -200px; } .link2 { position: relative; left: -200px; } .link3 { position: relative; left: -200px; } .link4 { position: relative; left: -200px; } .link5 { position: relative; left: -200px; } .hoverarea:hover .link1 { // position:relative; left: 0; transition: 1s; }

 <div class="container"> <div class="link1"> <div class="sociallink1">Facebook </div> <div class="hoverarea">f</div> </div> <div class="link2"> <div class="sociallink2">Google+ </div> <div class="hoverarea">G+</div> </div> <div class="link3"> <div class="sociallink3">Instagram </div> <div class="hoverarea">I</div> </div> <div class="link4"> <div class="sociallink4">Pinterest </div> <div class="hoverarea">P</div> </div> <div class="link5"> <div class="sociallink5">Twitter </div> <div class="hoverarea">T</div> </div> </div>

Answer 1

您缺少要轉換的“屬性”，在您的情況下為left 。
我還稍微更改了您的代碼，使其更緊湊。

使用類時，請嘗試對其進行優化，以便您沒有 5 個不同的類，而只有一個（或兩個）。

 * { margin: 0; padding: 0; } .container { margin: 100px 0 0 0; } .link { background-color: blueviolet; cursor: pointer; width: 250px; height: 50px; left: -200px; color: white; text-align: center; font-size: 40px; padding-right: 50px; position: relative; box-sizing: border-box; margin-bottom: .5em; } .link>div { background-color: black; width: 50px; height: 50px; position: absolute; right: 0; top: 0; } .link:hover { left: 0; transition: left 1s; }

 <div class="container"> <div class="link"> Facebook <div>f</div> </div> <div class="link"> Google+ <div>G+</div> </div> <div class="link"> Instagram <div>I</div> </div> <div class="link"> Pinterest <div>P</div> </div> <div class="link"> Twitter <div>T</div> </div> </div>