如何在鼠标悬停时将div内的文本滚动到左侧(How to scroll text within a div to left when hovering the div)

我有一个不适合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> 
  
 
 
 知道怎么做吗？ 
I have a text that does not fit in a div tag, .textBox. So I want to make a function that in case of hovering the parent div, the text starts scrolling from left to right. So the user can read the full content. And when it is not hovering it fades back to the default position.
 
I do not want to use marquee. I want do keep the structure as it is and use CSS, or JavaScript to solve it.
 
Here is an example without the function:
 
 
 
  
  
.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> 
  
 
 
Any idea how to do this?
                
最满意答案
                
                    
                        
 看到这个纯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> 
  
 
See this pure CSS solution, added a span tag to make it possible.
 
The key concept is: move the span tag to the left with the value of box's width - span's width. In the other word that makes it to scroll to the end of the text on hover.
 
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>