如何在 CSS/JS 中悬停时显示首字母缩写词的全名？答案

【问题标题】：How to show the full name of an acronym on hover in CSS/JS?如何在 CSS/JS 中悬停时显示首字母缩写词的全名？
【发布时间】：2020-08-11 19:35:07
【问题描述】：

假设我希望我的网站显示“CSS”，并在悬停时制作一个滑动动画，从而显示“层叠样式表”。我使用字体大小作为解决方法 (Fiddle) 实现了类似的动画，但我希望单词从首字母滑出。

您知道如何使用最简单的 CSS 或 JS 形式来实现吗？

p span {
  font-size: 0px;
  transition: all 0.3s ease-out;
}

p:hover span {
  font-size: 15px;
}

<p>
  C<span>ascading</span>
  S<span>tyle</span>
  S<span>heets</span>
</p>

【问题讨论】：

没有固定宽度的CSS很难有宽度动画。

标签： javascript html css animation hover

【解决方案1】：

这是一个 js 解决方案，它可能会更好一些，因为我在两个函数中重用了相同的逻辑，但它确实有效，随意更改侦听器的侦听位置（在本例中为文档）

const mouseEnterHandle = (event) => {
    if (event.target.closest('p')) {
        event.target.closest('p').querySelectorAll('span').forEach(el => {
            el.style.width = el.scrollWidth + 'px';
        })
    }
}

const mouseOutHandle = (event) => {
    if (event.target.closest('p')) {
        event.target.closest('p').querySelectorAll('span').forEach(el => {
            el.style.width = 0;
        })
    }
}

document.addEventListener('mouseover', (event) => mouseEnterHandle(event))
document.addEventListener('mouseout', (event) => mouseOutHandle(event))

document.removeEventListener('mouseover', (event) => mouseEnterHandle(event))
document.removeEventListener('mouseout', (event) => mouseOutHandle(event))

p  {
  overflow: hidden
  display: flex;
}


p:hover span {
    opacity: 1;
}
p span  {
    transition: all 0.3s ease-out;
    width: 0;
    opacity: 0;
    display: inline-flex;
    overflow: hidden;
}

<p>
  C<span>ascading</span>
  S<span>tyle</span>
  S<span>heets</span>
</p>

【讨论】：

这行得通，谢谢。是否可以仅在 CSS 中执行此操作？
@Rphad 我认为是，但这取决于您必须支持的浏览器。有 clip-path: inset 但不是很好支持。

【解决方案2】：

所以，在看到 bluebird 的回答后，我试图想出一个纯 CSS 的答案。

我达到了预期的结果，这里唯一的“技巧”是需要测量单词的（近似）宽度。在这里，它们分别是 56、24 和 33 像素宽。我在前两个中添加了一个空格的长度（3.2px）。

我试着放了

p:hover > span {
    width:100%;
}

要避免这种逐案解决方案，但它会扩展太多。如果有人有更多（仅 CSS）的通用解决方案，则此答案将完美完成。

p {
  display: flex;
}

p:hover > #cas {
    width: calc(56px + 3.2px);
}

p:hover > #sty {
    width: calc(24px + 3.2px);
}

p:hover > #she {
    width: 33px;
}

p span {
    width:0px;
    overflow:hidden;
    transition: all 0.3s ease-in;
    transition: all 0.3s ease-out;
}

<!DOCTYPE html>
<html>
<body>
<p>
   C<span id="cas">ascading</span>
   S<span id="sty">tyle</span> 
   S<span id="she">heets</span>
</p>

</body>
</html>

【讨论】：

这适用于不可重用的代码，如果你想用其他词做同样的事情，你必须手动修改值