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

Question

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

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

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

这是一个JSFiddle

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

Answer 1

*如果您赶时间，请检查 here 是否有一个 JS fiddle 实现了下面所说的所有内容。

对于纯粹的 CSS 解决方案，这是您最好的选择

用 div

<i>

添加另一个 <div>，其中包含一个 <span> 元素，其中包含您想要的文本

每个 link 的完成 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

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

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 fiddle。

祝你好运:)

Answer 2

虽然纯 css 解决方案需要您在每个锚标记内添加一个 span 元素，例如：

<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 完成的，具有适当的标题。

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

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>

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

Change FontAwesome icon to text on hover

html

javascript

css

font-awesome

reactjs