时间戳

首页 > 解决方案 > 如何在不使用伪状态的情况下在悬停时在现有边框底部上设置边框底部动画

javascript - 如何在不使用伪状态的情况下在悬停时在现有边框底部上设置边框底部动画

问题描述

我想在将鼠标悬停在现有边框底部上时为边框底部设置动画，如下所示： Gif 显示边框底部过渡

我尝试过使用伪状态来执行此操作::before，::after而这只会使边框底部动画化。而且我还尝试在原始元素上包含边框底部，但这不起作用，因为过渡发生在::after元素上，并且两者不会像 gif 示例中那样重叠：https ://jsfiddle.net/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的答案？

标签： javascripthtmlcss

解决方案

您需要创建堆叠在一起的元素，然后添加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>

推荐阅读