javascript - 悬停div时如何将div中的文本向左滚动

Question

我有一个文本不适合 div 标记，.textBox。所以我想做一个函数，在悬停父 div 的情况下，文本开始从左向右滚动。因此用户可以阅读完整内容。当它没有悬停时，它会淡化回默认位置。

我不想使用选取框。我想保持结构不变，并使用 CSS 或 JavaScript 来解决它。

这是一个没有函数的例子:

.textBox {
  width: 200px;
  height: 30px;
  border: 1px solid #000;
  overflow: hidden;
  line-height: 30px;
  padding: 5px;
}

<div class="textBox">Some Content here and some more here</div>

知道怎么做吗？

Answer 1

看到这个纯 CSS 解决方案，添加了一个 span 标签使其成为可能。

关键概念是:将 span 标签向左移动，值为框的宽度 - span 的宽度。换句话说，它会在悬停时滚动到文本的末尾。

jsfiddle

.textBox {
  width: 200px;
  height: 30px;
  border: 1px solid #000;
  overflow: hidden;
  line-height: 30px;
  padding: 5px;
  position: relative;
}
.textBox span {
  position: absolute;
  white-space: nowrap;
  transform: translateX(0);
  transition: 1s;
}
.textBox:hover span {
  transform: translateX(calc(200px - 100%));
}

<div class="textBox"><span>The quick brown fox jumps over the lazy dog</span></div>