Question

基本上，我想在文本的左侧和右侧设置一条线，当我将鼠标悬停在文本上时，它会将宽度增加到显示的末尾。

也许这会有所帮助......

没有悬停：

                  SOME TEXT

悬停时：

---------------------------- SOME TEXT ----------------- -------------------------------------------------- -------------------

我希望这些线条能够向外移动到父级的末尾。我尝试过使用伪元素，但没有运气。一些帮助将不胜感激。

Answer 1

这是一个JavaScript解决方案。将-添加到任意一侧，直到它到达行尾，并在鼠标移开时删除破折号。

为防止溢出，您只需跟踪clientHeight并在高度增加时立即停止添加破折号。

＆＃13;

var div = document.getElementsByClassName('test')[0];
var origText = div.innerText;
var origHeight = div.clientHeight;
var tooLong = false;
var addTxtInt;

div.addEventListener('mouseover', function() {
  addTxtInt = setInterval(function() {
    if (tooLong)
      return;
    if (div.clientHeight > origHeight) {
      div.innerText = div.innerText.substring(1, div.innerText.length - 1);
      tooLong = true;
      return;
    }
    div.innerText = "-" + div.innerText + "-";
    if (div.clientHeight > origHeight) {
      div.innerText = div.innerText.substring(1, div.innerText.length - 1);
      tooLong = true;
      return;
    }

  }, 80);
});

div.addEventListener('mouseleave', function() {
  clearInterval(addTxtInt);
  div.innerText = origText;
  tooLong = false;
});

＆＃13;

.test {
  display: block;
  overflow: hidden;
  text-align: center;
}

＆＃13;

<div class='test'>SOME TEXT</div>

＆＃13;

Answer 2

我是这样做的。随意播放动画持续时间和计时功能：

.separator {
  position: relative;
  display: flex;
  justify-content: center;
  align-items: center;
}
.separator:before, .separator:after {
  content: '';
  flex-grow:0;
  height: 1px;
  background-color: currentColor;
  transition: flex-grow .6s cubic-bezier(.4,0,.2,1);
  margin: 0 .5rem;
}
.separator:hover:before, .separator:hover:after {
  flex-grow: 1;
}

<div class="separator">SOME TEXT</div>
<div style="width: 50%; margin-top: 60px;border: 1px solid red; color: blue; padding: 3rem 0;">
  <div class="separator">TEST</div>

如何在鼠标悬停时滑出文本左侧和右侧的一条线

2 个答案: