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 scaled div上的位置，好像它没有缩放。（例如：如果鼠标位于div的中心，如[25,25]，则即使div被缩放也应该返回[25,25]）。我可能错了我的需要，所以功能要求优先：

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

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

Answer 1

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

我在这里增加了比例值，因此对跟随元素的影响（也适用于缩放）更明显。

CSS转换打破鼠标位置事件

1 个答案: