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

Question

假设我希望我的网站显示“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>

Answer 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>

Answer 2

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

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

我试过

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

避免这种 case-by-case 解决方案，但它会扩展太多。如果谁有更通用的解决方案（CSS-only），这个答案就完美完成了。

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>

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

How to show the full name of an acronym on hover in CSS/JS?

html

javascript

css

animation

hover