jQuery 地图鼠标移动

发布于 2024-08-28 02:02:21 字数 1518 浏览 16 评论 0原文

我用 jQuery 制作了一张地图,该地图分为许多区域,并使用地图坐标来制作悬停区域。悬停时,每个区域都会出现一个工具提示。一切都很好,但有一个问题。工具提示应跟随鼠标光标。我已经用 mousemove 完成了这一点,但是如果我的地图位于 div 中,该 div 位于页面的 fx 中心,则工具提示不是光标所在的位置,而是可能更靠左。屏幕越大,问题就越严重。

如何更改我的代码,使工具提示始终位于光标所在的位置?

     $(function() {

     $("#map-container AREA").mouseover(function() {
         var regionMap = "." + $(this).attr("id") + "-map";
         $(regionMap).css("display", "inline");
     }).mouseout(function() {

            var regionMap = "." + $(this).attr("id") + "-map";
         // Check if a click event has occured and only change the Region hover state accodringly
         if (!$(regionMap).hasClass("selected")) {
             $(regionMap).css("display", "none");
         }
     });

     $("#map-container AREA").click(function() {
         $("#map-container img.region").removeClass("selected").css("display", "none");
         var regionMap = "." + $(this).attr("id") + "-map";
         $(regionMap).addClass("selected").css("display", "inline");
     });

 });


 $(document).ready(function() {
     $(".tooltip").hide();

     $("#map-container area").mousemove(function(e) {

     var regionList = '.' + $(this).attr('id') + '-list';
     var topheight = $(regionList).height() + 55;
         $(regionList).show();
         $(regionList).css({
             top: (e.pageY - topheight) + "px",
             left: (e.pageX - 45) + "px"
         });
     });
     $("#map-container area").mouseout(function(e) {
         $(".tooltip").hide();
     });
 });

I have made a map with jQuery which is split up in many regions, and which uses the map coordinates to make hover areas. On hover a tooltip appears for every region. Everything works great, but there is one problem. The tooltip should follow the mouse cursor. This, I have done with mousemove, but if my map is in a div, which is fx centered on the page, the tooltip is not where the cursor is, but maybe more to the left. The problem gets worse the bigger the screen.

How can I change my code, so the tooltip is always where the cursor is?

     $(function() {

     $("#map-container AREA").mouseover(function() {
         var regionMap = "." + $(this).attr("id") + "-map";
         $(regionMap).css("display", "inline");
     }).mouseout(function() {

            var regionMap = "." + $(this).attr("id") + "-map";
         // Check if a click event has occured and only change the Region hover state accodringly
         if (!$(regionMap).hasClass("selected")) {
             $(regionMap).css("display", "none");
         }
     });

     $("#map-container AREA").click(function() {
         $("#map-container img.region").removeClass("selected").css("display", "none");
         var regionMap = "." + $(this).attr("id") + "-map";
         $(regionMap).addClass("selected").css("display", "inline");
     });

 });


 $(document).ready(function() {
     $(".tooltip").hide();

     $("#map-container area").mousemove(function(e) {

     var regionList = '.' + $(this).attr('id') + '-list';
     var topheight = $(regionList).height() + 55;
         $(regionList).show();
         $(regionList).css({
             top: (e.pageY - topheight) + "px",
             left: (e.pageX - 45) + "px"
         });
     });
     $("#map-container area").mouseout(function(e) {
         $(".tooltip").hide();
     });
 });

如果你对这篇内容有疑问,欢迎到本站社区发帖提问 参与讨论,获取更多帮助,或者扫码二维码加入 Web 技术交流群。

扫码二维码加入Web技术交流群

发布评论

需要 登录 才能够评论, 你可以免费 注册 一个本站的账号。

评论(1

谈场末日恋爱 2024-09-04 02:02:21

听起来你的问题可能出在定位上。如果您将地图放在 div 内以使其居中,则请将 regionlist div 放在该 div 外部。

工具提示应具有:

  • body 作为其父级。这最大限度地减少了相对和绝对定位的问题。
  • 包含 CSS“位置:绝对”。
  • z-index 大于您将鼠标悬停在其上的元素

It sounds like your problem might be with positioning. If you put your map inside a div to center it, then put your regionlist divs outside of that div.

The tooltip should have:

  • The body as it's parent. This minimizes problems with relative and absolute positioning.
  • Have the CSS "position: absolute" included.
  • Have a z-index greater than the element you are hovering over
~没有更多了~
我们使用 Cookies 和其他技术来定制您的体验包括您的登录状态等。通过阅读我们的 隐私政策 了解更多相关信息。 单击 接受 或继续使用网站,即表示您同意使用 Cookies 和您的相关数据。
原文