On-Symbol Hover Textanzeige (Folie oder Fade)

Ich habe die erstellt und es gab font awesome Symbol und Icon-Name.Ich möchte nur Text nur anzeigen, wenn das Symbol schweben.On-Symbol Hover Textanzeige (Folie oder Fade)

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>

Quelle

2016-08-31 NoOneCare

Und haben Sie versucht, etwas, dass zu tun? – vivekkupadhyay

welcher Text? wo willst du zeigen? als Tooltip oder auf deiner Seite? –

@vivekkupadhyay Ich möchte jquery Slide-Effekt hinzufügen, wenn Text angezeigt wird. – NoOneCare

try + CSS-Selektor

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>

zu verwenden, aber wie ich understant, you cant Link Verwendung, wenn Link ist nur sichtbar, wenn das Symbol schwebt, also schlage ich vor, dass Sie das Symbol in den Anker einbinden. Für Folie oder Fade-Effekt Sie Übergänge müssen:

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>

Quelle

2016-08-31 07:11:32

Gut .. danke .. aber ich brauche jquery 'Slide' Effekt. – NoOneCare

ist es das, was Sie meinen?

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>

ein Text angezeigt, wenn Sie Symbol bewegen.

Quelle

2016-08-31 07:16:07 Farshad

Noooooo ... Ich meine, wenn das Symbol mit Animation Textanzeige schweben – 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; 

    }

Quelle

2016-08-31 07:21:37

Noooooo ... ich meine, wenn das Symbol mit Animation Textanzeige schweben – NoOneCare

On-Symbol Hover Textanzeige (Folie oder Fade)

Antwort

Verwandte Themen