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

我有一个文本不适合

div

标记，

.textBox

。所以我想做一个函数，在悬停父div的情况下，文本开始从左向右滚动。因此，用户可以阅读全部内容。当它不悬停时，它会淡入默认位置

我不想使用字幕。我希望保持结构不变，并使用CSS或JavaScript来解决它

下面是一个没有函数的示例：

.textBox{
宽度：200px；
高度：30px；
边框：1px实心#000；
溢出：隐藏；
线高：30px；
填充物：5px；
}

---

此处有一些内容，此处有更多内容

编辑：我已取出CSS，因为它没有响应。下面的javascript代码使

div

在鼠标悬停时滚动

请注意：我在html中的div中添加了一个

id=“myDiv”

var myDiv = document.getElementById("myDiv");
myDiv.addEventListener("mouseover", function(){
    myDiv.style = "overflow-y:scroll"
});
myDiv.addEventListener("mouseout", function(){
    myDiv.style = "overflow-y:hidden"
});

---

我也在这里演示了它。

使用jquery滚动左方法

var interval_val = 2;

setInterval(function(){
    $(".scroll_contant").scrollLeft(interval_val);
    interval_val++;
}, 100);

请参阅此链接：

---

对于onmouseover和onmouseout事件访问的演示示例：

查看此纯CSS解决方案，添加了一个span标记使其成为可能

关键概念是：将span标记向左移动，其值为box's width-span's width。换句话说，在悬停时滚动到文本的末尾

.textBox{
宽度：200px；
高度：30px；
边框：1px实心#000；
溢出：隐藏；
线高：30px；
填充物：5px；
位置：相对位置；
}
.文本框跨度{
位置：绝对位置；
空白：nowrap；
变换：translateX（0）；
过渡：1s；
}
.textBox：悬停范围{
转化：translateX（计算（200px-100%）；
}

---

敏捷的棕色狐狸跳过了懒狗

查看JQUERY

$（文档）.ready（函数（）
{
//用于悬停时向左滚动的内容
$（“.scroll\u on\u hover”）.mouseover（函数（）
{
$（this.removeClass（“省略号”）；
var maxscroll=$（“.boardindex\u themefitted\u board\u main\u description”）.width（）；
var速度=最大滚动*15；
$（此）。动画（{
向左滚动：速度
}，10000，“线性”）；//为较慢的设置计时器
} );
$（“.scroll\u on\u hover”）.mouseout（函数（）
{
$（this.stop（）；
$（this.addClass（“省略号”）；
$（此）。动画（{
左：0
}“快”）；
} );
} );
.boardindex\u themifited\u board\u main\u description.滚动\u on\u hover:hover{cursor:none；}
.省略号{文本溢出：省略号；}
.hide{display:none；}
/*设置一个fontsize，使其在所有浏览器中看起来都相同*/
正文{背景：#fff；背景重复：重复；字体：78%/130%“Arial”，“Helvetica”，无衬线；边距：0自动；}
/*文本使用深灰色，标题使用#000等*/
body，td，th，tr{color:#444；}
/*BoardIndex.template.php主题匹配格式-------*/
.boardindex\u themefitted\u category\u holder\u aligner{文本对齐：居中；边距：0自动；}
.boardindex_themefitted_board_main{背景：fff；边框：1px实心#373737；边框半径：8px；高度：44px；边距：0自动；宽度：20%；}
.boardindex_themefitted_board_main_内容{填充：10px；溢出：隐藏；}
.boardindex_themefitted_board_main_description{空白：nowrap；溢出：隐藏；字体大小：10px；字体系列：Arial；颜色：#37373737；线条高度：12px；}


可以自由谈论这个板块上的任何事情。可以自由谈论这个板块上的任何事情。可以自由谈论这个板块上的任何事情。
的另一个版本，它包含javascript（避免使用Jquery）来处理动态css宽度

返回的转换可能更复杂，但我认为这只会使示例复杂化



const tansitionTimePerPixel=0.01；
const textboxs=document.queryselectoral(
“.textBox”
);
textboxs.forEach（（textBox）=>{
textBox.addEventListener（'mouseenter'，（）=>{
设textWidth=textBox.lastChild.clientWidth；
让boxWidth=parseFloat（getComputedStyle（textBox）.width）；
设translateVal=Math.min（boxWidth-textWidth，0）；
让translateTime=-tansitionTimePerPixel*translateVal+“s”；
textBox.lastChild.style.transitionDuration=translateTime；
textBox.lastChild.style.transform=“translateX”（+translateVal+“px）”；
})
textBox.addEventListener（'mouseleave'，（）=>{
textBox.lastChild.style.transitionDuration=“0.3s”；
textBox.lastChild.style.transform=“translateX（0）”；
})
});
.textBox{
宽度：20%；
高度：30px；
边框：1px纯黑；
溢出：隐藏；
线高：30px；
填充物：5px；
}
.textBox>span{
显示：内联块；
空白：nowrap；
过渡时间函数：线性；
}
敏捷的棕色狐狸跳过了懒惰的狗
尝试使用字幕字幕标签不受欢迎。字幕标签很烦人。可能重复感谢，但没有悬停效果？！对不起，我的第一个答案没有回答你的问题。我希望这一切都会好起来