如何解决如何在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;
}
版权声明:本文内容由互联网用户自发贡献,该文观点与技术仅代表作者本人。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如发现本站有涉嫌侵权/违法违规的内容, 请发送邮件至 dio@foxmail.com 举报,一经查实,本站将立刻删除。