如何在鼠标悬停时将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标记向左移动.换句话说,它使其在悬停时滚动到文本的末尾.

的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>