如何获得确切的clientX和clientY JavaScript位置到Wordpress页面上的子div元素？

我有一个突出显示悬停地图在JavaScript中构建，显示一个div'信息框'，当我将鼠标悬停在某个区域时@https://isidors.com/test/dupex/contact问题是我的'信息框'div元素似乎并没有出现在确切的鼠标位置，但是它被某些值所抵消，我不明白它们来自哪里。我必须采取一些修正措施才能让它显示正确。如何获得确切的clientX和clientY JavaScript位置到Wordpress页面上的子div元素？

我把我的地图放入的div元素是其他div的子元素。也许我有办法设置clientX和clientY相对于具有悬停地图的div元素。这里是我的JavaScript代码：

<script> 
$(document).ready(function() { 
$('#regiuneest, #regiunecentru, #regiunevest, #regiunenord').hover(function(e) { 
    $('#info-box').css('display','block'); 
    $('#info-box').html($(this).data('info')); 
}); 

$("g, circle, #info-box").mouseleave(function(e) { 
    $('#info-box').css('display','none'); 
}); 

$('#cod').mousemove(function(e) { 
    var paraM = e.clientY/4; 

    $('#info-box').css('top',e.clientY + $(document).scrollTop() - 600); 
    $('#info-box').css('left',e.clientX - ($('#info-box').width()/2) - 100); 
}).mouseover(); 

var ios = /iPad|iPhone|iPod/.test(navigator.userAgent) && !window.MSStream; 
if(ios) { 
    $('a').on('click touchend', function() { 
    var link = $(this).attr('href'); 
    window.open(link,'_blank'); 
    return false; 
    }); 
} 
}); 

</script>

当一切（见没有在WordPress https://codepen.io/SilviuIsidor/pen/EweZwR工作需要更正全代码示例）是在一个页面上，它工作正常。当我把它放到Wordpress页面时，clientX和clientY的鼠标位置似乎停止正常工作。我怎样才能解决这个问题？

来源

2017-10-13 ISS

我终于找到了我的问题的解决方案。我只是将地图的css位置属性更改为相对，将信息框更改为固定，并删除了我放置的更正。

它现在就像一个魅力。感谢任何看着这篇文章的人！

来源

2017-10-13 14:34:22 ISS

如何获得确切的clientX和clientY JavaScript位置到Wordpress页面上的子div元素？

回答

相关问题