在 hover 上将 FontAwesome 图标更改为文本

Question

如何在 hover 上用文本替换图标？

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

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

这是一个JSFiddle

我尝试在a标签中添加<p>GitHub</p>并添加 css 以使其出现在 hover 上。 但是，我无法让它工作。 不确定这是否是正确的方法，或者我是否错误地设置了 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 属性，您也可以使用 go 来实现此 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 内创建每个跨度元素，因为这是由 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>

Answer 2

*如果您赶时间，请在此处查看实现以下所有内容的 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

然后在hover上添加如下样式规则来设置元素的定位和链接子元素的行为

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

祝你好运:)