如何在不使用偽狀態的情況下在懸停時為現有邊框底部上的邊框底部設置動畫

Question

我想在懸停在現有邊框底部上時為邊框底部設置動畫，如下所示： Gif 顯示邊框底部過渡

我曾嘗試使用偽狀態::before和::after此操作，這只會使邊框底部無中生有。 而且我還嘗試在原始元素上包含一個邊框底部，但這不起作用，因為轉換發生在::after元素上，並且兩者不像 gif 示例中那樣重疊： https://jsfiddle。凈/nicyuvi/6xem7zgp/3/

 h1 { color: #666; display: inline-block; margin: 0; text-transform: uppercase; border-bottom: 3px solid lightgray; } h1:after { display: block; content: ''; border-bottom: solid 3px #019fb6; transform: scaleX(0); transition: transform 250ms ease-in-out; } h1:hover:after { transform: scaleX(1); } h1.fromLeft:after { transform-origin: 0% 50%; }

 <h1 class="fromLeft">Expand from left</h1>

任何使用html/css/vanilla javascript 的答案？

Answer 1

您需要創建堆疊在彼此之上的元素，然后將pointer-events: none添加到上面pointer-events: none ，這將使其對指針事件“透明”，因此您仍然可以訪問其下方的input 。 使用~選擇器，我們現在可以編輯上部元素的寬度，同時懸停input ，因為它“物理地”放置在input 。

 /* optional */ input[type=text] { background-color: #ECEFF1; border: 0; } /**/ *, ::after, ::before { box-sizing: border-box; } .wrapper { display: inline-block; position: relative; } input[type=text], .onHover { height: 2rem; border-bottom-style: solid; border-bottom-width: 1px; } input[type=text] { border-bottom-color: #B0BEC5; } input[type=text]:hover ~ .onHover { width: 100%; } .onHover { position: absolute; top: 0; left: 0; width: 0; border-bottom-color: #000; pointer-events: none; transition: width 400ms ease-in; }

 <div class="wrapper"> <input type="text"> <div class="onHover"></div> </div>

Answer 2

一個簡單的背景動畫就可以做到：

 h1 { color: #666; display: inline-block; margin: 0; text-transform: uppercase; background: linear-gradient(#019fb6 0 0), linear-gradient(lightgray 0 0); background-size:0% 3px,100% 3px; /* we make the top one 0% width */ background-position:bottom left; background-repeat:no-repeat; transition:0.5s; } h1:hover { background-size:100% 3px; /* 100% width on hover */ }

 <h1 class="fromLeft">Expand from left</h1>

考慮到您的代碼，負邊距就是您所缺少的：

 h1 { color: #666; display: inline-block; margin: 0; text-transform: uppercase; border-bottom: 3px solid lightgray; } h1:after { display: block; content: ''; border-bottom: solid 3px #019fb6; margin-bottom:-3px; /* here */ transform: scaleX(0); transition: transform 250ms ease-in-out; } h1:hover:after { transform: scaleX(1); } h1.fromLeft:after { transform-origin: 0% 50%; }

 <h1 class="fromLeft">Expand from left</h1>