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

问题描述

比方说，我希望我的网站显示“ CSS”，并将其悬停时制作一个 sliding 动画，从而显示“层叠样式表”。 我使用字体大小作为一种变通方法（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>

解决方法

这是一个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>

,

因此，在看到bluebird的答案之后，我试图提出一个仅CSS的答案。

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

我试图放

SELECT a.`post_id`,b.`name`,MAX(case when meta_key = 'value' THEN `meta_value` ELSE NULL END) as  'Email',FROM table_1 a

INNER JOIN table_2 b
ON FIND_IN_SET(a.post_id,b.payment_ids)
GROUP BY a.post_id
HAVING OrderStatus LIKE '%processing%' OR '%pending%' OR '%accepted%' AND DeliveryDate >= (DATE_SUB(CURDATE(),INTERVAL 7 DAY)) AND DeliveryType = 'pickup'

避免这种情况下的解决方案，但随后扩展太多。 如果有人有更多的（仅CSS）通用解决方案，那么这个答案将很完美。

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

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;
}