将 FontAwesome 图标更改为悬停时的文本

Question

如何在悬停时用文本替换图标？

我正在用 React 编写这个站点，但是我已经对其进行了更改，以便它在 JSFiddle 中正确显示。当我将鼠标悬停在其中一个气泡上时，我希望显示来自 a 标签的 title="..." 的文本。

例如，当我将鼠标悬停在 GitHub 气泡上时，我希望“GitHub”替换气泡中的图标。

这是JSFiddle

我尝试在a 标记中添加<p>GitHub</p> 并添加css 以使其在悬停时显示。但是，我无法让它工作。不确定这是否是正确的方法，或者我是否错误地设置了 css 属性。

Answer 1

虽然纯 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 属性，您也可以使用这种 javascript 方法：

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，但不再需要在 HTML 中创建每个 span 元素，因为这是由 JS 完成的，并带有适当的标题。

工作 sn-p（字体真棒图标未正确加载，但它们应该在您的代码中）：

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>

Answer 2

*如果您赶时间，请查看here 以获取实现以下所有内容的 JS fiddle。

对于纯 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> 标记的颜色更改为白色以外的颜色，以便图标和其中的文本可见
• 在<a> 标签上设置position: relative

然后添加以下样式规则来设置元素的定位和链接子元素在悬停时的行为

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;
}

您可以为其添加更多功能，但这很有效。

检查here 是否有实现上述所有内容的 JS 小提琴。

祝你好运:)