如何优雅地实现鼠标悬停出现隐藏文字？

一、使用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代码的复杂度，同时又能保证动画效果的顺畅。