删除数字被圈出时的故障（最好是 CSS）

Question

我正在生成 table 个数字，如下面的代码片段所示。我面临的问题是，当单击一个数字（或单元格）时，它会得到 class black，然后是 circle，然后是 number 重复。

当classcircle激活时；具有该特定数字的列 稍微加宽 2px。发生这种情况是因为从所述 class.

的 border 属性收到了额外的 2px

这能以某种方式解决吗？我真的希望这些值处于相对上下文中，例如。 %s、ems 等而不是 px 或 pt.

Classes = ['number', 'black', 'circle'];
$('.td').on('click', function(e) {
  e.preventDefault();
  var $span = $(this).children('span');
  var state = $span.data('state');
  $span.removeClass(Classes[state]);
  state = ++state % 3;
  console.log(state);
  $span.data('state', state).addClass(Classes[state]);
});

* {
  font-size: 1em;
}
#game {
  display: table;
}
.tr {
  display: table-row;
}
.td {
  display: table-cell;
  margin: 1em;
  padding: .5em;
  border: 1px solid black;
  cursor: pointer;
  -webkit-touch-callout: none;
  -webkit-user-select: none;
  -moz-user-select: none;
  user-select: none;
}
.number,
.black,
.circle {
  padding: .5em;
  font-weight: bold;
  text-align: center;
  vertical-align: center;
  transition: ease 1s;
}
.black {
  color: white;
  background-color: rgba(50, 50, 50, 0.8);
}
.circle {
  border-radius: 50%;
  border: 1px solid black;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div id='game'>
  <div class='tr'>
    <div class='td'><span class='number' data-state='0'>4</span>
    </div>
    <div class='td'><span class='number' data-state='0'>5</span>
    </div>
    <div class='td'><span class='number' data-state='0'>1</span>
    </div>
    <div class='td'><span class='number' data-state='0'>2</span>
    </div>
    <div class='td'><span class='number' data-state='0'>4</span>
    </div>
  </div>
  <div class='tr'>
    <div class='td'><span class='number' data-state='0'>5</span>
    </div>
    <div class='td'><span class='number' data-state='0'>4</span>
    </div>
    <div class='td'><span class='number' data-state='0'>3</span>
    </div>
    <div class='td'><span class='number' data-state='0'>2</span>
    </div>
    <div class='td'><span class='number' data-state='0'>1</span>
    </div>
  </div>
  <div class='tr'>
    <div class='td'><span class='number' data-state='0'>3</span>
    </div>
    <div class='td'><span class='number' data-state='0'>3</span>
    </div>
    <div class='td'><span class='number' data-state='0'>2</span>
    </div>
    <div class='td'><span class='number' data-state='0'>1</span>
    </div>
    <div class='td'><span class='number' data-state='0'>4</span>
    </div>
  </div>
  <div class='tr'>
    <div class='td'><span class='number' data-state='0'>1</span>
    </div>
    <div class='td'><span class='number' data-state='0'>4</span>
    </div>
    <div class='td'><span class='number' data-state='0'>5</span>
    </div>
    <div class='td'><span class='number' data-state='0'>3</span>
    </div>
    <div class='td'><span class='number' data-state='0'>2</span>
    </div>
  </div>
  <div class='tr'>
    <div class='td'><span class='number' data-state='0'>5</span>
    </div>
    <div class='td'><span class='number' data-state='0'>1</span>
    </div>
    <div class='td'><span class='number' data-state='0'>2</span>
    </div>
    <div class='td'><span class='number' data-state='0'>4</span>
    </div>
    <div class='td'><span class='number' data-state='0'>4</span>
    </div>
  </div>
</div>

顺便说一句，我还想要一个解决方案（如果可能的话）：

当black状态时，父div整体上应该得到黑色背景。
圆圈（以及 black class 的黑色背景）触及它所在单元格的边界。这可以处理吗？

Answer 1

宽度和高度的变化是因为您在添加圆 class 时添加了 1px 宽度的 border。这最初不存在，因此会影响大小。要修复它，您可以添加一个 transparent 1px 边框作为元素的默认边框。

关于其他两个问题，为 span 元素设置 display: inline-block 并取消 td 元素上的填充将使背景颜色应用于元素满的。 parent 上的填充总是意味着它和 child 内容之间有一个 space。当我们将 background 应用到 child div 时，这个 space 不会变色。

注意： 我已将 child 元素上的填充从 0.5em 增加到 0.5em 1em 以调整已删除的填充来自 parent.

Classes = ['number', 'black', 'circle'];
$('.td').on('click', function(e) {
  e.preventDefault();
  var $span = $(this).children('span');
  var state = $span.data('state');
  $span.removeClass(Classes[state]);
  state = ++state % 3;
  console.log(state);
  $span.data('state', state).addClass(Classes[state]);
});

* {
  font-size: 1em;
}
#game {
  display: table;
}
.tr {
  display: table-row;
}
.td {
  display: table-cell;
  margin: 1em;
  border: 1px solid black;
  cursor: pointer;
  -webkit-touch-callout: none;
  -webkit-user-select: none;
  -moz-user-select: none;
  user-select: none;
}
.number,
.black,
.circle {
  padding: .5em 1em;
  font-weight: bold;
  text-align: center;
  vertical-align: center;
  transition: ease 1s;
  border: 1px solid transparent;
}
.black {
  color: white;
  background-color: rgba(50, 50, 50, 0.8);
}
.circle {
  border-radius: 50%;
  border: 1px solid black;
}
span {
  display: inline-block;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div id='game'>
  <div class='tr'>
    <div class='td'><span class='number' data-state='0'>4</span>

    </div>
    <div class='td'><span class='number' data-state='0'>5</span>

    </div>
    <div class='td'><span class='number' data-state='0'>1</span>

    </div>
    <div class='td'><span class='number' data-state='0'>2</span>

    </div>
    <div class='td'><span class='number' data-state='0'>4</span>

    </div>
  </div>
  <div class='tr'>
    <div class='td'><span class='number' data-state='0'>5</span>

    </div>
    <div class='td'><span class='number' data-state='0'>4</span>

    </div>
    <div class='td'><span class='number' data-state='0'>3</span>

    </div>
    <div class='td'><span class='number' data-state='0'>2</span>

    </div>
    <div class='td'><span class='number' data-state='0'>1</span>

    </div>
  </div>
  <div class='tr'>
    <div class='td'><span class='number' data-state='0'>3</span>

    </div>
    <div class='td'><span class='number' data-state='0'>3</span>

    </div>
    <div class='td'><span class='number' data-state='0'>2</span>

    </div>
    <div class='td'><span class='number' data-state='0'>1</span>

    </div>
    <div class='td'><span class='number' data-state='0'>4</span>

    </div>
  </div>
  <div class='tr'>
    <div class='td'><span class='number' data-state='0'>1</span>

    </div>
    <div class='td'><span class='number' data-state='0'>4</span>

    </div>
    <div class='td'><span class='number' data-state='0'>5</span>

    </div>
    <div class='td'><span class='number' data-state='0'>3</span>

    </div>
    <div class='td'><span class='number' data-state='0'>2</span>

    </div>
  </div>
  <div class='tr'>
    <div class='td'><span class='number' data-state='0'>5</span>

    </div>
    <div class='td'><span class='number' data-state='0'>1</span>

    </div>
    <div class='td'><span class='number' data-state='0'>2</span>

    </div>
    <div class='td'><span class='number' data-state='0'>4</span>

    </div>
    <div class='td'><span class='number' data-state='0'>4</span>

    </div>
  </div>
</div>

如果您不希望圆圈的所有边都接触到网格，请进行以下更改：

.number, .black, .circle {
  margin: .1em;
  padding: .4em .9em;
}

.black {
  box-shadow: 0 0 0 .1em black;
}

删除数字被圈出时的故障（最好是 CSS）

Remove the glitch when number gets circled (Preferably CSS)

html

css

jquery

css-transitions