Question

我想知道当鼠标悬停在超棒字体图标上时是否可以显示文本/标题

.title {
  color: green;
  text-align: center;
}

<link href="https://stackpath.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css" rel="stylesheet" />
<div class="title"><i class="fa fa-exchange fa-2xfa fa-exchange fa-2x" aria-hidden="true"></i></div>

Answer 1

也许在:after伪元素中具有数据属性

attr() @ MDN

.fa {
  position: relative;
}

.fa:hover::after {
  content: attr(data-title);
  padding-left: .25em;
  position: absolute;
  bottom: 0;
  margin-bottom: -1em;
  left: 50%;
  transform: translateX(-50%);
  font-size: .5em;
  color: red;
}

div {
  color: green;
  text-align: center;
}

<link href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css" rel="stylesheet" />
<div>
  <i class="fa fa-exchange fa-2x" aria-hidden="true" data-title="Exchange"></i></div>

Answer 2

没有更多信息，您可以在title上使用本机i属性：

<i class="..." title="My title here"></i>

当您将鼠标悬停在带有title的属性上时，会弹出带有文本的小弹出窗口。

这是您想要的效果吗？

div {
 color: green;
 text-align: center;
}

<link href="https://stackpath.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css" rel="stylesheet" />
<div><i class="fa fa-exchange fa-2xfa fa-exchange fa-2x" aria-hidden="true" title="My title"></i></div>

以字体超赞的图标显示标题

2 个答案: