在图标悬停文本显示(幻灯片或淡入淡出)

Question

我创建了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>

Answer 1

尝试使用+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>

但正如我所说,当链接仅在悬停图标时可见时,你不能使用链接,所以我建议你将图标包装成锚.对于幻灯片或淡入淡出效果,您需要转换:

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>