Question

如何编辑此页面（http://thepostrider.com/2018-senate-election/）的JS（或CSS？），以使“信息框”停止出现故障，并使每个状态都可单击，以便弹出信息框并您可以阅读它，直到单击到另一种状态？

这是JS：

    $("path, circle").click(function(e) {
  $('#info-box').css('display','block');
  $('#info-box').html($(this).data('info'));
});

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

$(document).mousemove(function(e) {
  $('#info-box').css('top',e.pageY-$('#info-box').height()-30);
  $('#info-box').css('left',e.pageX-($('#info-box').width())/2);
}).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;
  });
}

Answer 1

在CSS中，您可以将信息框的位置更改为absolute，而不是relative。当您这样做时，它不会影响其余网站的位置。然后，您需要为信息框提供正确的坐标以将其定位在页面上。

How to overlay one div over another div

这里有详细的解释。

可点击的信息框

1 个答案: