如何添加字母与动画悬停与(CSS/HTML/Javascript)

Question

我想把各种缩短的单词扩展到悬停的完整单词(网站的一种风格选择)-想想"p| prkr"悬停时，它变成了"p| park"。一旦你离开，它就会回来。示例(左上)。

我怎么也想不出该怎么做!

尝试使用display:none和on:hover显示，但我认为我需要某种类型的javascript来使动画"漂亮"?或者隐藏延迟?我发现了很多"打字"。但不是这样的，但我觉得应该有办法做到这一点。此外，我如何嵌套它，使单词是一个链接?我需要把元音隐藏起来。

<nav>
<div class="container">
<h1><a href="index.html">
<span class="let-1">p|</span>
<span class="let-2">p</span>
<span class="let-4">a</span>
<span class="let-5">r</span>
<span class="let-6">k</span>
<span class="let-7">e</span>
<span class="let-8">r</span>
</a></h1>
</div>
</nav>

nav.addEventListener('hover', function () {
this.classList.toggle('is-active');

我就是想不明白，非常感谢你的帮助!这是第一次，用尽了我的搜索努力。

Answer 1

下面的代码片段应该会让您了解如何完成类似于您发送的引用的内容。

body {
background: #1d1e21;
font-family: "Poppins", sans-serif;
}
a{
text-decoration: none;
}
.logo{
display: inline-flex;
}
.animated-logo{
display: flex;
color: #fff; 
transition-property: transform;
transition-duration: .15s;
font-size: 2rem;
font-weight: 600;
}
.letter{
display: inline;
}
.letter.first{
margin-right: 10px;
}
.letter.first:after{
content: '|';
font-weight: 200;
font-size: 20px;
margin-left: 10px;
}
.letter-hide {
transform: scaleX(0);
opacity: 0;
transform-origin: 0 50%;
transition: all .4s ease;
width: 0;
}
.letter-hide:nth-of-type(3) {
transition-delay: 50ms;
}
.letter-hide:nth-of-type(6) {
transition-delay: 75ms;
}
.animated-logo:hover .letter-hide {
width: 100%;
opacity: 1;
transform: scaleX(1);
}

<a href="#" class="logo">
<h3 class="animated-logo">
<span class="letter first">p</span>
<span class="letter">p</span>
<span class="letter-hide">a</span>
<span class="letter">r</span>
<span class="letter">k</span>
<span class="letter-hide">e</span>
<span class="letter">r</span>
</h3>
</a>

Answer 2

一种相当简单的方法是隐藏全文直到悬停，首先只显示一个before伪元素，其内容是保存在data-属性中的缩短版本。在鼠标悬停时，通过在pseudo元素后面拖动一个不透明的内容显示完整版本。

这样就可以通过CSS来完成，HTML就不那么杂乱了。

[data-full] {
position: relative;
display: inline-block;
color: transparent;
}
[data-full]:hover {
color: black;
}
[data-full]::before {
content: attr(data-full);
color: black;
position: absolute;
top: 0;
left: 0;
z-index: 0;
}
[data-full]:hover::before {
color: transparent;
}
[data-full]::after {
content: '';
width: 100%;
height: 100%;
background-color: white;
position: absolute;
top: 0;
right: 0;
transition: width 2s linear;
z-index: -1;
display: inline-block;
}
[data-full]:hover::after {
content: '';
width: 0;
z-index: 1;
}

<div class="start">p| <span data-full="prkr">parker</span></div>

使用一点Javascript当然你可以得到更多的时间，甚至对于任何长度的单词。此外，如果知道单词的初始字符总是垂直栏之前的字符，则可以由JS提取并显示，而无需将其放在初始HTML的单独元素中。同样，可以使用JS来去掉元音，在运行时创建data-属性，使HTML更简单。