Question

I want to use a GitHub icon which should show some text when hovered over. But using a CSS class with an icon class is showing no progress. Here is the code for reference:

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

2 个答案: