아이콘 위로 마우스를 가져 가면 문자가 표시됩니다 (슬라이드 또는 페이드)

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

아이콘 위로 마우스를 가져 가면 문자가 표시됩니다 (슬라이드 또는 페이드)

답변

관련 문제