アイコンホバー上でテキスト表示（スライドまたはフェード）

ulを作成しました。font awesomeアイコンとアイコン名があります。アイコンをホバーするときにだけテキストを表示したいだけです。アイコンホバー上でテキスト表示（スライドまたはフェード）

ul{ 
 
    list-style:none; 
 
    } 
 
ul li a{ 
 
    text-decoration:none; 
 
    }

<link href="https://maxcdn.bootstrapcdn.com/font-awesome/4.6.3/css/font-awesome.min.css" rel="stylesheet"/> 
 

 
<ul> 
 
    <li><i class='fa fa-facebook'></i><a href="#"><i> Facebook</i></a></li> 
 
    <li><i class='fa fa-twitter'></i><a href="#"><i> Twitter</i></a></li> 
 
     <li><i class='fa fa-google-plus'></i><a href="#"><i> Google plus</i></a></li> 
 
</ul>

出典

2016-08-31 NoOneCare

そして、あなたはそれに関連するものを試してみましたか？ – vivekkupadhyay

どのテキスト？どこに表示したいですか？ツールチップまたはあなたのページに –

@vivekkupadhyay jqueryを追加したいテキストが表示されているときにスライドエフェクトを追加します。 – NoOneCare

、+ CSSセレクタ

ul{ 
 
    list-style:none; 
 
    } 
 
ul li a{ 
 
    text-decoration:none; 
 
    display: none; 
 
    } 
 
ul li i:hover + a{ 
 
    display: inline; 
 
    }

<link href="https://maxcdn.bootstrapcdn.com/font-awesome/4.6.3/css/font-awesome.min.css" rel="stylesheet"/> 
 

 
<ul> 
 
    <li><i class='fa fa-facebook'></i><a href="#"><i> Facebook</i></a></li> 
 
    <li><i class='fa fa-twitter'></i><a href="#"><i> Twitter</i></a></li> 
 
     <li><i class='fa fa-google-plus'></i><a href="#"><i> Google plus</i></a></li> 
 
</ul>

を使用しようが、私はunderstantとしてアイコンをホバリングする場合にのみリンクが表示されているとき、あなたはリンクを使用するカントだから私はアンカーにアイコンをラップすることをお勧めします。

ul{ 
 
    list-style:none; 
 
    } 
 
ul li a{ 
 
    text-decoration:none; 
 
    } 
 
ul li a i:last-child{ 
 
    transition: max-width 0.5s ease; 
 
    max-width:0; 
 
    display: inline-block; 
 
    overflow: hidden; 
 
    white-space: nowrap; 
 
    } 
 
ul li a:hover i:last-child{ 
 
    max-width: 200px; 
 
    }

<link href="https://maxcdn.bootstrapcdn.com/font-awesome/4.6.3/css/font-awesome.min.css" rel="stylesheet"/> 
 

 
<ul> 
 
    <li><a href="#"><i class='fa fa-facebook'></i><i> Facebook</i></a></li> 
 
    <li><a href="#"><i class='fa fa-twitter'></i><i> Twitter</i></a></li> 
 
     <li><a href="#"><i class='fa fa-google-plus'></i><i> Google plus</i></a></li> 
 
</ul>

出典

2016-08-31 07:11:32

良い..ありがとう..しかし、私はjquery 'スライド'効果を使用する必要があります。 – NoOneCare

が、これはあなたが何を意味するかである：スライド、またはフェード効果のためには、遷移が必要になりますか？

ul{ 
 
    list-style:none; 
 
    } 
 
ul li a{ 
 
    text-decoration:none; 
 
    }

<link href="https://maxcdn.bootstrapcdn.com/font-awesome/4.6.3/css/font-awesome.min.css" rel="stylesheet"/> 
 

 
<ul> 
 
    <li><i class='fa fa-facebook' title="facebook"></i><a href="#"><i> Facebook</i></a></li> 
 
    <li><i class='fa fa-twitter' title="twitter"></i><a href="#"><i> Twitter</i></a></li> 
 
     <li><i class='fa fa-google-plus' title="google-plus"></i><a href="#"><i> Google plus</i></a></li> 
 
</ul>

アイコンを置くと、テキストが表示されます。

出典

2016-08-31 07:16:07 Farshad

Noooooo ...アニメーションのテキスト表示でアイコンをホバーすると意味する – NoOneCare

<html> 
 
    <head> 
 
    <title></title> 
 
    
 

 
    </head> 
 
    <body> 
 
    
 
    <ul> 
 
<li><i class='fa fa-facebook'></i><a href="#"><i> Facebook</i></a> 
 

 
<span class="span">this is text to display</span> 
 

 
</li> 
 
<li><i class='fa fa-twitter'></i><a href="#"><i> Twitter</i></a></li> 
 
    <li><i class='fa fa-google-plus'></i><a href="#"><i> Google plus</i></a></li> 
 
</ul> 
 
    
 
    
 
    
 
    
 
    
 
    
 
    
 
    
 
    </body> 
 
    
 
    </html>

.span{ 

    display:none; 


    } 

.fa-facebook:hover .span{ 
    display:block; 

    }

出典

2016-08-31 07:21:37

Noooooo ...アニメーションのテキスト表示でアイコンをホバーすると – NoOneCare

アイコンホバー上でテキスト表示（スライドまたはフェード）

答えて

関連する問題