CSS变换破坏鼠标位置事件

Question

我正在缩放页面上的div (缩放功能)和非缩放的div。缩放的div有鼠标覆盖事件，这些事件会导致文本跟随鼠标。缩放破坏了应该跟随鼠标的元素的位置。

悬停文本如下所示：

$("#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工作，但不重要。不支持。

这个小提琴，可能会更好地解释这一点，并说明什么不起作用：http://jsfiddle.net/yvanaxe1/4/ (使结果窗格足够大)

Answer 1

让这些“跟随者”元素是缩放元素的后代是绝对需要的吗？因为，如果您可以将它们从那里取出，然后简单地将它们放置在鼠标控制触发元素的左上角(通过在任何地方使用clientX/-Y值，再加上一些偏移来将它们从那里重新定位到适当的距离)，我认为您可能会更容易地实现…。http://jsfiddle.net/yvanaxe1/6/

我在这里增加了标度值，这样对跟随元素的影响(也适用于缩放)更加明显。