如何在 <a> 标签中使用带有图标 class 的 CSS class

Question

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

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

.tooltiptext 应该是 .tooltip

的子代

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

Answer 2

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

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

如何在 <a> 标签中使用带有图标 class 的 CSS class

How to use a CSS class with an icon class in an <a> tag

html

css

icons

visual-web-developer

hover