我想在懸停時將各種縮寫詞擴展為完整詞（網站的文體選擇） - 想想“p| prkr”，懸停時它會更改為“p| parker”。一旦你離開，它就會恢復原狀。示例（左上角）。
我一生都無法弄清楚如何做到這一點！
嘗試使用 display:none 和 on:hover show，但我想我需要某種型別的 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');
我只是想不通，非常感謝您的幫助！新來的，用盡了我的搜索努力。
uj5u.com熱心網友回復：
一個相當簡單的方法是隱藏全文直到懸停，首先只顯示一個 before 偽元素，其內容是保存在 data- 屬性中的縮短版本。在懸停時，通過在偽元素之后繪制一個不透明的元素來顯示完整版本。
這樣就可以通過 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 更簡單。
uj5u.com熱心網友回復：
下面的代碼片段應該讓您了解如何完成與您發送的參考資料類似的事情。
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>轉載請註明出處，本文鏈接：https://www.uj5u.com/shujuku/329289.html
標籤：javascript html 查询 css
下一篇：如何隱藏替代文字