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

祝你好運:)