Как использовать класс CSS с классом значков в теге <a> - PullRequest
Новая
       21

Как использовать класс CSS с классом значков в теге <a>

1 голос
/ 20 апреля 2019

Я хочу использовать значок 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>

Ответы [ 2 ]

2 голосов
/ 20 апреля 2019

.tooltiptext должен быть ребенком .tooltip

<a class="tooltip fab fa-github" style="font-size: 2em;" href='https://github.com/rohitthapliyal2000'>
  <span class="tooltiptext">Hovered text</span>
</a>
1 голос
/ 20 апреля 2019

Если вы не хотите менять разметку, вы можете использовать соседний братский комбинатор (+) в своих селекторах - см. Демонстрацию ниже: 

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