CODEWITHSUNDEEP
jqueryhtmlcss
ApsaraAruna
ApsaraAruna

Reputation: 136

On icon hover Text display (slide or fade)

I have created the ul and there was font awesome icon and icon name.I just want to display text only when hover the icon.

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>

Upvotes: 1

Views: 768

Answers (2)

Pepo_rasta
Pepo_rasta

Reputation: 2900

try to use + css selector

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>

but as i understant, you cant use link when link is visible only when hovering icon, so i suggest you to wrap icon into anchor. For slide, or fade effect you will need transitions:

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>

Upvotes: 5

Farshad
Farshad

Reputation: 325

is this what you mean?

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>

a text will appear when you hover icon.

Upvotes: 0

Related Questions