如何在 tag中使用带有图标类的CSS类

Question

我想使用一个GitHub图标，它应该在悬停时显示一些文本。但是使用带有图标类的CSS类却没有任何进展。以下是供参考的代码：

/* Tooltip container */

.tooltip {
  position: relative;
  display: inline-block;
  border-bottom: 1px dotted black;
  /* If you want dots under the hoverable text */
}


/* Tooltip text */

.tooltip .tooltiptext {
  visibility: hidden;
  width: 120px;
  background-color: black;
  color: #fff;
  text-align: center;
  padding: 5px 0;
  border-radius: 6px;
  /* Position the tooltip text - see examples below! */
  position: absolute;
  z-index: 1;
}


/* Show the tooltip text when you mouse over the tooltip container */

.tooltip:hover .tooltiptext {
  visibility: visible;
}

<a class="tooltip fab fa-github" style="font-size: 2em;" href='https://github.com/rohitthapliyal2000'> </a> <span class="tooltiptext">Hovered text</span>

Answer 1

如果您不想更改标记，可以在选择器中使用相邻的兄弟组合器（+） - 请参阅下面的演示：

.tooltip {
  position: relative;
  display: inline-block;
  border-bottom: 1px dotted black;
  text-decoration: none; /* remove anchor underline */
}

.tooltip + .tooltiptext { /* <- note the + combinator */
  visibility: hidden;
  width: 120px;
  background-color: black;
  color: #fff;
  text-align: center;
  padding: 5px 0;
  border-radius: 6px;
  position: absolute;
  z-index: 1;
}
.tooltip:hover + .tooltiptext { /* <- note the + combinator */
  visibility: visible;
}

<link rel="stylesheet" href="https://use.fontawesome.com/releases/v5.8.1/css/all.css">

<a class="tooltip fab fa-github" style="font-size: 2em;" href='https://github.com/rohitthapliyal2000'></a>
<span class="tooltiptext">Hovered text</span>

Answer 2

.tooltiptext应该是.tooltip的孩子

<a class="tooltip fab fa-github" style="font-size: 2em;" href='https://github.com/rohitthapliyal2000'>
  <span class="tooltiptext">Hovered text</span>
</a>