CSSは、ホバー時にテキストまたはラベルを表示します

Question

ユーザーがマウスを動かすとラベルまたはテキストが右側に表示されるメニューを作成しようとしていますが、以下のコードを使用して簡単な効果を作成できます。私は紛失しているので、どのようにしてホバーを表示してもラベルを表示させることができます。

#side-menu { 
 
background-color : black; 
 
color:white; 
 
width:80px; 
 
padding:20px; 
 
list-style:none; 
 
} 
 

 
#side-menu:hover { 
 
\t width: 400px !important; \t 
 
\t display:inline-block; 
 
}

<link href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css" rel="stylesheet"/> 
 

 

 
<ul id="side-menu"> 
 
     <li> 
 
      <i class="fa fa-image fa-2x" style="margin-left:17px;"></i>  
 
     </li> 
 
    </ul>

私の目標は、ホバー、任意の提案は、これを達成する際に右側にラベルやテキストを表示するのですか？これまでのところ私のコードです。前もって感謝します！

<li><i class="fa fa-image fa-2x" style="margin-left:17px;"></i> <span class='label-menu'> Product Image <span></li> 

.label-menu{ 
display:none; 
} 

Answer 1

マウスがアイコンの上に置いたときに、あなたがテキストを表示することができます

span{ 
 
    display:none; 
 
} 
 
#side-menu { 
 
    background-color : black; 
 
    color:white; 
 
    width:80px; 
 
    padding:20px; 
 
    list-style:none; 
 
} 
 

 
#side-menu:hover { 
 
    width: 400px !important; \t 
 
    display:inline-block; 
 
} 
 
#side-menu:hover span{ 
 
    display:inline-block; 
 
}

<link href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css" rel="stylesheet"/> 
 

 
<ul id="side-menu"> 
 
    <li> 
 
     <li> 
 
      <i class="fa fa-image fa-2x" style="margin-left:17px;"></i> 
 
      <span>Product Image</span 
 
     </li> 
 
    </li> 
 
</ul>

Answer 2

あなたが見ることができるコード

#side-menu { 
 
background-color : black; 
 
color:white; 
 
width:180px; 
 
padding:20px; 
 
list-style:none; 
 
position: relative; 
 
} 
 

 
#side-menu:hover { 
 
\t display:inline-block; 
 
} 
 

 

 
.label-menu, 
 
#side-menu i{ 
 
    display: inline-block; 
 
    vertical-align: middle; 
 
    color: #fff; 
 
    margin: 0 5px; 
 
} 
 

 
#side-menu:hover .label-menu { 
 
    display: inline-block; 
 
} 
 
.label-menu { 
 
    display: none; 
 
}

<link href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css" rel="stylesheet"/> 
 

 

 
<ul id="side-menu"> 
 
<li><i class="fa fa-image fa-2x"></i> <span class='label-menu'> Product Image </span></li> 
 

 
    </ul>

Answer 3

あなたはあなたのリストの項目にスパンを追加し、このように置くと、それを表示することができます。

#side-menu { 
 
background-color : black; 
 
color:white; 
 
width:150px; 
 
padding:20px; 
 
list-style:none; 
 
} 
 
#side-menu li span.fa { 
 
    display: inline-block; 
 
    margin-right: 10px; 
 
} 
 

 
#side-menu li span.fa:hover ~ span { 
 
\t display:inline-block; 
 
} 
 
#side-menu li span.fa ~ span { 
 
    display: none; 
 
}

<link href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css" rel="stylesheet"/> 
 

 

 
<ul id="side-menu"> 
 
     <li> 
 
      <span class="fa fa-image fa-2x"></span><span>your Text here</span>  
 
     </li> 
 
    </ul>

Answer 4

これはトリックを行う必要があります。これを達成するための

#side-menu { 
 
    background-color: black; 
 
    color: white; 
 
    width: 80px; 
 
    padding: 20px; 
 
    list-style: none; 
 
    transition: ease-in-out all .4s; 
 
    display: table; 
 
} 
 

 
li { 
 
    width: 50%; 
 
    height: 100%; 
 
    display: table-cell; 
 
} 
 

 
.side-menu__label { 
 
    float: left; 
 
    width: 100px; 
 
    opacity: 0; 
 
    position: absolute; 
 
    transition: ease-in-out all .4s; 
 
} 
 

 
#side-menu:hover { 
 
    width: 400px; 
 
} 
 

 
#side-menu:hover .side-menu__label { 
 
    opacity: 1; 
 
}

<link href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css" rel="stylesheet" /> 
 

 

 
<ul id="side-menu"> 
 
    <li> 
 
    <i class="fa fa-image fa-2x" style="margin-left:17px;"></i> 
 
    </li> 
 
    <li> 
 
    <div class="side-menu__label">Hello World</div> 
 
    </li> 
 
</ul>

Answer 5

もう一つの方法は、CSSでの単純な静的テキストを追加することです。例えば。

#side-menu { 
 
background-color : black; 
 
color:white; 
 
width:80px; 
 
padding:20px; 
 
list-style:none; 
 
} 
 
#side-menu:hover { 
 
\t width: 400px !important; \t 
 
\t display:inline-block; 
 
} 
 
#side-menu li:hover:after { 
 
\t content: ">> Hovering >>"; /* You can add simple static text in CSS as well. */ 
 
    position: inline-block; 
 

 
} 
 
}

<link href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css" rel="stylesheet"/> 
 

 

 
<ul id="side-menu"> 
 
     <li> 
 
      <i class="fa fa-image fa-2x" style="margin-left:17px;"></i>  
 
     </li> 
 
     <li> 
 
      <i class="fa fa-image fa-2x" style="margin-left:17px;"></i>  
 
     </li> 
 
    </ul>

これは、疑似要素の前後と:: ::使用して小さなDOMを追加する最も簡単な方法です。私は、テキストは、Li内に表示させるためにしようとしていた

#side-menu { 
 
background-color : black; 
 
color:white; 
 
width:80px; 
 
padding:20px; 
 
list-style:none; 
 
} 
 

 
#side-menu:hover { 
 
\t width: 400px !important; \t 
 
\t display:inline-block; 
 
} 
 
#side-menu li span { 
 
    visibility: hidden; 
 
    display:inline-block; 
 
} 
 
#side-menu li:hover span { 
 
\t visibility: visible; 
 

 
} 
 
}

<link href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css" rel="stylesheet"/> 
 

 

 
<ul id="side-menu"> 
 
     <li> 
 
      <i class="fa fa-image fa-2x" style="margin-left:17px;"></i> 
 
      <span> Label 1</span>  
 
     </li> 
 
     <li> 
 
      <i class="fa fa-image fa-2x" style="margin-left:17px;"></i> 
 
      <span> Label 2</span>  
 
     </li> 
 
    </ul>