如何優雅地實現鼠標懸停出現隱藏文字？

一、使用CSS的:hover偽類實現鼠標懸停效果

CSS的:hover偽類可以給某個元素設置鼠標懸停時的樣式，我們可以利用這個特性來實現鼠標懸停出現隱藏文字的效果。

<style>
  .hover-effect {
    position: relative;
    /* 隱藏文字 */
    color: transparent;
    /* 設置hover狀態下文字顯示 */
    &:hover::before {
      content: attr(data-content);
      position: absolute;
      top: 100%;
      left: 0;
      padding: 5px 10px;
      background-color: #333;
      color: #fff;
      border-radius: 5px;
      white-space: nowrap;
    }
  }
</style>

<div class="hover-effect" data-content="這裡是隱藏的文字">鼠標懸停顯示文字</div>

以上代碼中，我們先使用CSS將隱藏文字的顏色設置為透明，然後在:hover狀態下通過偽元素::before顯示出相應的隱藏文字。

二、使用JavaScript實現鼠標懸停出現隱藏文字

除了使用CSS，我們也可以使用JavaScript來實現鼠標懸停出現隱藏文字的效果。

<script>
  const hoverEle = document.querySelector('.hover-effect-js');
  const content = hoverEle.dataset.content;
  let tooltip = null;
  hoverEle.addEventListener('mouseover', () => {
    tooltip = document.createElement('div');
    tooltip.innerHTML = content;
    tooltip.style = `
      position: absolute;
      top: 100%;
      left: 0;
      padding: 5px 10px;
      background-color: #333;
      color: #fff;
      border-radius: 5px;
      white-space: nowrap;
    `;
    hoverEle.appendChild(tooltip);
  });
  hoverEle.addEventListener('mouseout', () => {
    if (tooltip) {
      hoverEle.removeChild(tooltip);
      tooltip = null;
    }
  });
</script>

<div class="hover-effect-js" data-content="這裡是隱藏的文字">鼠標懸停顯示文字</div>

這段代碼中，我們首先獲取到對應元素和隱藏文字內容，然後通過添加和刪除子元素的方式，在鼠標懸停和移出時分別顯示和隱藏相應的文字內容。

三、結合CSS和JavaScript實現鼠標懸停出現隱藏文字

除了單獨使用CSS或JavaScript，我們還可以結合二者來實現更為精細的效果。

<style>
  .hover-effect-combine {
    position: relative;
    /* 隱藏文字 */
    color: transparent;
  }
  .hover-effect-combine::before {
    content: attr(data-content);
    position: absolute;
    top: 100%;
    left: 0;
    padding: 5px 10px;
    background-color: #333;
    color: #fff;
    border-radius: 5px;
    white-space: nowrap;
    /* 只在JavaScript加載成功前顯示 */
    visibility: hidden;
  }
</style>

<script>
  const hoverEle = document.querySelector('.hover-effect-combine');
  const content = hoverEle.dataset.content;
  let tooltip = hoverEle.querySelector('::before');
  hoverEle.addEventListener('mouseover', () => {
    tooltip.style.visibility = 'visible';
  });
  hoverEle.addEventListener('mouseout', () => {
    tooltip.style.visibility = 'hidden';
  });
</script>

<div class="hover-effect-combine" data-content="這裡是隱藏的文字">鼠標懸停顯示文字</div>

在以上代碼中，我們將隱藏文字的方式放在了CSS中，而JavaScript只負責添加和刪除樣式中的visibility屬性來控制文字的顯示和隱藏。這樣做可以充分利用CSS的特性，減少JavaScript代碼的複雜度，同時又能保證動畫效果的順暢。