メニュードローバー効果ときホバー

Question

uが、その後 .hoverareaクラスに .sociallink1、 .sociallink2を置いて、などは、ドローバー効果のように切り替えられますが、私のコードは

が動作していないとTHERも余裕のabhoveあるとき、私はそのような効果を作成しています

私は

* { 
 
    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>

0私のコードで以下のみの 2px

を追加したときに、各.sociallink1となどがautomaticaly追加geetingされています

Answer 1

移行する "プロパティ"がありません。ケースleftです。
私もあなたのコードを少し変えて、コンパイラにしました。

クラスを使用する場合は、5つの異なるクラスを持たず、1つ（または2つ）のクラスを持つようにクラスを最適化してください。

* { 
 
    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>