Измените значок FontAwesome на текст при наведении курсора - PullRequest
Новая
       16

Измените значок FontAwesome на текст при наведении курсора

0 голосов
/ 12 июля 2020

Как заменить значок текстом при наведении?

Я пишу этот сайт в React, однако я изменил его, чтобы он правильно отображался в JSFiddle. При наведении курсора на один из пузырей я хотел бы, чтобы отображался текст из тега title="..." тега a.

Например, когда я нахожу указатель на пузырек GitHub, я хотел бы, чтобы «GitHub», чтобы заменить значок, который находится в пузыре.

Вот JSFiddle

Я попытался добавить <p>GitHub</p> в тег a и добавить css, чтобы он появлялся при наведении. Однако заставить его работать не удалось. Не уверен, был ли это правильный подход или я неправильно устанавливал свойства css.

Ответы [ 2 ]

1 голос
/ 12 июля 2020

В то время как чистое решение css потребовало бы, чтобы вы просто добавили один элемент диапазона внутри каждого тега привязки, например: 

<span class="icon_title">Github</span>

со следующим css: 

.bubble .icon_title{
  display:none;
}
.bubble:hover .icon_title{
  display:initial;
}
.bubble:hover .icon{
  display:none;
}

Но если вы действительно хотите использовать атрибут title для каждого тега привязки, вы также можете go для этого javascript aproach: 

var bubbles = document.querySelectorAll('.bubble a'); // Get all anchor tags inside bubbles in an array
for(const bubble of bubbles){ // Loop through each bubble
  let newSpan = document.createElement('span'); //create a bew span element
  newSpan.innerHTML = bubble.title; // Add the title of each anchor tag to the span element
  newSpan.classList.add('icon_title') // Give your new span element a class
  bubble.appendChild(newSpan); // Add the new span element to your bubble
}

* Обратите внимание, что вам все равно нужно добавить css, но создание каждого элемента span внутри HTML больше не требуется, так как это делается JS с соответствующим заголовком.

Рабочий фрагмент (значки font awesome не загружаются должным образом, но они должны быть ваш код): 

var bubbles = document.querySelectorAll('.bubble a'); // Get all anchor tags inside bubbles in an array
for(const bubble of bubbles){ // Loop through each bubble
    let newSpan = document.createElement('span'); //create a bew span element
  newSpan.innerHTML = bubble.title; // Add the title of each anchor tag to the span element
  newSpan.classList.add('icon_title') // Give your new span element a class
  bubble.appendChild(newSpan); // Add the new span element to your bubble
} 
.App-header {
  background-color: #282c34;
  min-height: 100vh;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  font-size: calc(48px + 2vmin);
  color: white;
}

.bubble {
  display: inline-block;
  background-color: transparent;
  border: 3px solid gray;
  margin: 15px;
  border-radius: 50%;
}

a {
  display: table-cell;
  vertical-align: middle;
  text-align: center;
  height: 100px;
  width: 100px;
}
.bubble .icon_title{
  display:none;
}
.bubble:hover .icon_title{
  display:initial;
}
.bubble:hover .icon{
  display:none;
}
<link href="https://stackpath.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css" rel="stylesheet"/>
<header className="App-header">
  <div>
    <span class="bubble">
      <a title="GitHub" href="https://github.com/{username}" target="_blank " rel="noopener noreferrer">
        <i class="icon fab fa-github fa-2x"></i>
      </a>
    </span>

    <span class="bubble">
      <a title="LinkedIn" href="https://www.linkedin.com/in/{username}/" target="_blank " rel="noopener noreferrer">
        <i class="icon fab fa-linkedin fa-2x"></i>
      </a>
    </span>

    <span class="bubble">
      <a title="Resume" href="resume.pdf" target="_blank " rel="noopener noreferrer">
        <i class="icon fab fa-linkedin fa-2x"></i>
      </a>
    </span>

    <span class="bubble">
      <a title="Email" href="mailto:{email}" target="_blank " rel="noopener noreferrer">
        <i class="icon fas fa-envelope fa-2x"></i>
      </a>
    </span>
  </div>

</header>
0 голосов
/ 12 июля 2020

* Если вы торопитесь, проверьте здесь на наличие JS скрипки, реализующей все, что сказано ниже.

Для чисто CSS решения, вот ваш лучший вариант

  • Оберните тег <i>, содержащий ваш значок, внутри div
  • Добавьте еще <div>, который содержит элемент <span>, содержащий нужный вам текст

Готовые HTML для каждой ссылки должны выглядеть примерно так: 

<a title="GitHub" href="https://github.com/{username}" target="_blank " rel="noopener noreferrer">
  <div>
    <i class="icon fab fa-github fa-2x"></i>
  </div>
  <div>
    <span>Github</span>
  </div>
</a>

Затем в вашей таблице стилей

  • Измените цвет <a> теги к цвету, отличному от белого, чтобы значок и текст в нем были видны
  • Установите position: relative на своих <a> тегах

Затем добавьте следующие правила стиля в установить расположение элементов и поведение дочерних элементов ссылки при наведении 

a > div {
  position: absolute;
  top: 0; bottom: 0;
  right: 0; left: 0;
  display: flex;
  border-radius: 100%;
}

a > div > .icon,
a > div > span {
  margin: auto;
  transition: all ease-in-out 250ms;
}

a > div > span {
  opacity: 0;
}

a:hover > div > .icon {
  opacity: 0;
}

a:hover > div > span {
  opacity: 1;
}

Вы можете добавить к нему дополнительные функции, но это работает.

Отметьте здесь для скрипки JS, реализующей все, что сказано выше.

Удачи :)

...