<i>要素をホバリングコンテナdivに使用する

Question

私はかなり単純な効果を得ようとしていると思います。私は4つのアイコンを持つメニューを持っており、ホバリング時に右にスライドするように説明したいと思います。私はdivで最初のdivの終了タグの後に来て、私は+を試しましたが、何も起こっていないので、私はCSSでこれを行うことができるか分かりません。

display:flexに問題がありますか？私はそのことに慣れていないと言わなければならない。

あなたは何が起こっているの何かを見ることができますが、それは1

#mainicons { 
 
    position: fixed; 
 
    top: 250px; 
 
    left: 0px; 
 
    text-align: center; 
 
} 
 

 
#mainicons i { 
 
    opacity: 0.5; 
 
    display: flex; 
 
    flex-direction: column; 
 
    justify-content: space-between; 
 
    margin-top: 40; 
 
    height: 40px; 
 
    width: 50px; 
 
    padding: 10px; 
 
    color: white; 
 
    background: black; 
 
    text-align: center; 
 
    font-size: 15px; 
 
    line-height: 40px; 
 
    -webkit-transition: all .5s ease; 
 
    -moz-transition: all .5s ease; 
 
    -o-transition: all .5s ease; 
 
    transition: all .5s ease; 
 
} 
 

 
#mainicons i:hover { 
 
    border: 1.5px solid black; 
 
    color: black; 
 
    background: white; 
 
} 
 

 
#icondesc { 
 
    position: fixed; 
 
    top: 250px; 
 
    left: 0px; 
 
    text-align: center; 
 
} 
 

 
#icondesc i { 
 
    display: flex; 
 
    flex-direction: column; 
 
    justify-content: space-between; 
 
    top: 50%; 
 
    margin: 80; 
 
    color: black; 
 
    background: white; 
 
    width: 70px; 
 
    height: 50px; 
 
    line-height: 40px; 
 
    padding-left: 0px; 
 
    font-size: 15px; 
 
    -webkit-transition: all .5s ease; 
 
    -moz-transition: all .5s ease; 
 
    -o-transition: all .5s ease; 
 
    transition: all .5s ease; 
 
} 
 

 
#mainicons i:hover+#icondesc i { 
 
    margin-left: 50px; 
 
}

<link href="//maxcdn.bootstrapcdn.com/font-awesome/4.1.0/css/font-awesome.min.css" rel="stylesheet"> 
 
<div id="icondesc"> 
 
    <i>Home</i> 
 
    <i>Ask</i> 
 
    <i>Request</i> 
 
    <i>Archive</i> 
 
</div> 
 
<div id="mainicons"> 
 
    <a href="/"><i class="fa fa-home"></i></a> 
 
    <a href="/ask"><i class="fa fa-envelope"></i></a> 
 
    <a href="/submit"><i class="fa fa-pencil "></i></a> 
 
    <a href="/archive"><i class="fa fa-clock-o"></i></a> 
 
</div>

が回答ありがとうございあるべきちょうどので、私は#mainicons iの不透明度を下げた私のコードはここにあります！

Answer 1

問題はフレックスに関連していません。 DOMの後に来る要素のホバリングに基づいて要素をターゲットにしようとしています。基本的にはprevious sibling selectorを作成しようとしていますが、これはCSSでは本質的に可能ではありません。

アイコンの付いた同じコンテナにテキストの説明を置き、トランジションエフェクトの絶対配置を使用します。ここではラフスケッチです：

#mainicons { 
 
    position: fixed; 
 
    top: 250px; 
 
    left: 0px; 
 
    text-align: center; 
 
    display: flex; 
 
    flex-direction: column; 
 
} 
 

 
#mainicons>a { 
 
    position: relative; 
 
    display: flex; 
 
    justify-content: center; 
 
    align-items: center; 
 
} 
 

 
#mainicons i { 
 
    opacity: 1; 
 
    height: 40px; 
 
    width: 50px; 
 
    padding: 10px; 
 
    color: white; 
 
    background: black; 
 
    text-align: center; 
 
    font-size: 15px; 
 
    line-height: 40px; 
 
    transition: all .5s ease; 
 
} 
 

 
#mainicons i:hover { 
 
    border: 1.5px solid black; 
 
    color: black; 
 
    background: white; 
 
} 
 

 
#mainicons span { 
 
    color: black; 
 
    background: white; 
 
    width: 70px; 
 
    font-size: 15px; 
 
    transition: all .5s ease; 
 
    position: absolute; 
 
    height: 100%; 
 
    display: flex; 
 
    align-items: center; 
 
    justify-content: center; 
 
    left: -100px; 
 
    opacity: 0; 
 
} 
 

 
#mainicons a:hover>span { 
 
    opacity: 1; 
 
    left: 70px; 
 
    transition: .5s; 
 
    border: 1px solid black; 
 
}

<link href="https://maxcdn.bootstrapcdn.com/font-awesome/4.1.0/css/font-awesome.min.css" rel="stylesheet" /> 
 
<div id="mainicons"> 
 
    <a href="/"><i class="fa fa-home"></i><span>Home</span></a> 
 
    <a href="/ask"><i class="fa fa-envelope"></i><span>Ask</span></a> 
 
    <a href="/submit"><i class="fa fa-pencil "></i><span>Request</span></a> 
 
    <a href="/archive"><i class="fa fa-clock-o"></i><span>Archive</span></a> 
 
</div>

https://jsfiddle.net/qeoyyryp/1/