数字随机放置与图像悬停

Question

我对网页有疑问。 我想在页面上随机放置数字，比如postit-wall-thing。只是数字。当我将鼠标悬停在一个数字上时，它应显示图像。图像永远不会显示在数字上。

如下图所示，有人能告诉我这样放置数字的最佳方法吗？我觉得填充和边距不是最好的方法，但我不知道是什么

当我悬停时，图像不应该放在数字上。它是否超过了另一个数字并不重要，而不是它所绑定的数字。

我不是要求任何人为我做这个数学，而是我应该如何思考。解决这个问题的聪明方法。

Answer 1

也许尝试使用javascript：

document.getElementById("one").innerHTML = "1.jpg";

Answer 2

尝试这样的事情。输入所需的图块数量并添加显示图片，而不是更改for (i = annots.size() - 1; i >= 0; --i) { Field field = new Field(annots.getAt((int) i)); String nameField = field.getName(); int range = nameField.indexOf("_FIXPDFBOX"); if (range != -1) { int sub = range; field.rename(nameField.substring(sub)); } } 。

此代码创建数字的随机顺序。

＆＃13;

＆＃13;

backgournd-color

＆＃13;

function start() {
  var maxNumber = 8,
    div = "",
    array = [];

  while (array.length < maxNumber) {
    var x = Math.floor(Math.random() * 8) + 1;
    if ($.inArray(x, array) == -1) {
      array.push(x);
    }
  }

  for (var i = 0; i < maxNumber; i++) {
    div += "<div class='row'>";
    for (var j = 0; j < 3; j++) {
      div += `<div class='col-xs-4 tile' id='${"div-"+i}'>${array[i]}</div>`;
      if (j < 2) i++;
      if (i >= maxNumber) break;
    }
    div += "</div>";
    if (i + 1 >= maxNumber) break;
  }

  $("#numberPanel").append(div);

  for (var i = 0; i < maxNumber; i++) {
    $("#div-" + i).on('mouseenter', function() {
      $(this).css('background-color', 'red');
    });
    $("#div-" + i).on('mouseout', function() {
      $(this).css('background-color', 'white');
    });
  }
}

start();

＆＃13;

body {
  padding: 10px;
  margin: 10px;
}

.tile {
  border: 1px solid black;
  padding: 15px;
  max-width: 85px;
  max-height: 85px;
  width: 85px;
  height: 85px;
}

＆＃13;

＆＃13;

＆＃13;