悬停时的菜单驱动效果

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>