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

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

我在React中编写了这个站点，但是我对它进行了修改，使它正确地显示在JSFIDLE中。当我将鼠标悬停在一个气泡上时，我希望显示

a

标记的

title=“…”

中的文本

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

这里有一个

---

我已经尝试在

a

标记中添加

GitHub

，并添加css使其显示在悬停状态。然而，我无法让它工作。不确定这是否是正确的方法，或者我是否错误地设置了css属性。

*如果您很匆忙，请检查JS fiddle是否实现了下面所述的所有内容

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

• 包装将图标保存在div中的
  标记
• 添加另一个
  ，其中包含保存所需文本的
  元素

每个链接的已完成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>

您可以向它添加更多功能，但这是可行的

检查JS fiddle是否实现了上述所有内容

---

祝你好运：）

而纯css解决方案只需要在每个锚定标记中添加一个span元素，如：

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

但是，如果您真的想为每个锚定标记使用title属性，您也可以使用以下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，但是不再需要在HTML中创建每个span元素，因为这是由JS完成的，并具有适当的标题

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

var-bubbles=document.querySelectorAll（'.bubble a'）；//获取数组中气泡内的所有锚定标记
对于（气泡的常量气泡）{//循环通过每个气泡
let newSpan=document.createElement（'span'）；//创建一个bew span元素
newSpan.innerHTML=bubble.title；//将每个锚定标记的标题添加到span元素
newSpan.classList.add（'icon\u title'）//为新span元素指定一个类
bubble.appendChild（newSpan）；//将新的span元素添加到bubble中
}

.App头{
背景色：#282c34；
最小高度：100vh；
显示器：flex；
弯曲方向：立柱；
对齐项目：居中；
证明内容：中心；
字体大小：calc（48px+2vmin）；
颜色：白色；
}
.泡泡{
显示：内联块；
背景色：透明；
边框：3倍纯色灰色；
利润率：15px；
边界半径：50%；
}
a{
显示：表格单元格；
垂直对齐：中间对齐；
文本对齐：居中；
高度：100px；
宽度：100px；
}
.bubble.icon\u标题{
显示：无；
}
.bubble:悬停。图标\u标题{
显示：首字母；
}
.bubble:悬停.icon{
显示：无；
}

谢谢，这解决了我的问题！现在我只需要弄清楚如何在气泡中垂直对齐文本。你弄明白了吗？文本在代码段中垂直对齐。如果它在你的代码中不起作用，你可以查看flexbox。是的，我已经找到了。我在css中为

a

标记设置对齐属性：

垂直对齐：中间；文本对齐：居中
.bubble .icon_title{
  display:none;
}
.bubble:hover .icon_title{
  display:initial;
}
.bubble:hover .icon{
  display:none;
}

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
}