CSS 变换破坏鼠标位置事件答案

【问题标题】：CSS transform breaking mouse position eventsCSS 变换破坏鼠标位置事件
【发布时间】：2014-08-12 14:48:48
【问题描述】：

我正在使用非缩放 div 缩放页面上的 div（缩放功能）。缩放的 div 具有导致文本跟随鼠标的 mouseover 事件。缩放会破坏应该跟随鼠标的元素的位置。

悬停文本如下：

$("#container").on('mousemove','.mouseMe',function(e){
    $("#followA").css("top",e.clientY)
                 .css("left",e.clientX);
});
//also some additional mouseenter/leave events are used to display hover

缩放：

#container{
    transform-origin: top left;
    transform: scale(1.1,1.1);
}

我认为我需要的是让鼠标在 css 缩放 div 上的位置，就好像它没有缩放一样。（例如：如果鼠标位于 div 的中心，比如 [25,25]，即使 div 被缩放，它也应该始终返回 [25,25]）。不过，我可能对我需要的东西有误，所以功能需求优先：

鼠标悬停时元素需要跟随鼠标
元素容器（或多个容器）需要通过 css 进行扩展，而不会破坏悬停（其他转换不相关且没有嵌套缩放）
JS、JQuery、CSS都在用。
Chrome 支持是主要的。也应该在 FF 中工作，但并不重要。不支持 IE。

这个小提琴可以更好地解释这一点并显示什么不起作用：http://jsfiddle.net/yvanaxe1/4/（使结果窗格足够大）

【问题讨论】：

让那些“追随者”元素成为缩放元素的后代是绝对要求吗？因为，如果您可以将它们 out 从那里取出，然后只需将它们放置在鼠标悬停触发元素的左上边缘（通过在任何地方使用 clientX/-Y 值，加上一些偏移量来重新将它们从那里定位到适当的距离），我想你可能会更容易到达那里......jsfiddle.net/yvanaxe1/6（我在这里增加了scale的值，以便对跟随元素的影响[也已应用缩放]是更明显。）
@CBroe 是的，我已经将我的悬停文本 div 从它们的原始容器中分离出来，以便与 z-indexing 配合使用，所以我想我想我可以将它们提升一个级别。我有点想要一个保持标记完整的解决方案，但我可以使用它。把它变成一个我会接受的答案（如果没有其他结果的话）。
好的，添加为（临时？）答案。至于“保持标记完整”，您也可以在初始化时使用 JS 将元素移动到其他 DOM 位置（取决于该标记对您的重要性）。

标签： javascript jquery css transform scale

【解决方案1】：

让那些“追随者”元素成为缩放元素的后代是绝对要求吗？因为，如果您可以将它们从那里取出，然后只需将它们放置在鼠标悬停触发元素的左上边缘（通过在任何地方使用 clientX/-Y 值，加上一些偏移量以将它们从那里重新定位到适当的距离)，我想你可能会更容易到达那里……http://jsfiddle.net/yvanaxe1/6/

我在这里增加了缩放值，这样对跟随元素（也应用了缩放）的效果更加明显。

【讨论】：

好吧，这引起的问题比我想象的要少，而且集成得很好。谢谢。