CSS变换破坏鼠标位置事件

CSS transform breaking mouse position events

本文关键字：位置 事件 鼠标 变换 CSS      更新时间：2023-09-26

我正在缩放非缩放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中工作，但不是至关重要。不支持IE浏览器

这个可以更好地解释这一点，并显示什么不工作:http://jsfiddle.net/yvanaxe1/4/(使结果窗格足够大)

是否有那些"追随者"元素的后代缩放元素(s)是一个绝对的要求?因为，如果你可以把它们从那里拿出来，然后简单地将它们放置在鼠标触发元素的左上角边缘(通过使用clientX/-Y值到处，加上一些偏移，从那里重新定位到适当的距离)，我认为你可能会更容易到达那里…http://jsfiddle.net/yvanaxe1/6/

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

相关文章：