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>

Answer 2

这是你的意思吗？

＆＃13;

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

＆＃13;

<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>

＆＃13;

当你悬停图标时会出现一个文字。

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

2 个答案: