javascript - 当鼠标悬停在容器的 1/3 宽度上时使内容可见，而不添加子容器

Question

我有宽度为 100% 的 div 容器。我需要根据容器中的鼠标悬停来隐藏和显示内容。但这需要在主容器左侧 30% 和其余部分 (70%) 的情况下发生，没有显示/隐藏效果。我们可以在不添加任何额外的子容器的情况下实现这种效果吗？

图像表示

如何做出这个效果？

Answer 1

This Fiddle说明了一个非常基本的解决方案；每次鼠标移动到 30% 范围内时它都会调用该效果，因此您可能需要添加一些进一步的逻辑来防止这种情况发生。

我使用了一个宽度为 500px 的容器和一个子容器 div，但仅用于说明目的； JavaScript 将管理任意宽度的单个容器。您需要向“widthModifier”变量添加任何定位、边距或填充，但如果您愿意，您也可以从 JavaScript 中的容器中获取这些内容。