chrome bug

by dru_zod

HTML

<div class="table">
	<div class="row">
    <div class="cell">
      <a href="#">A New Hope</a>
    </div>
    <div class="cell">
      <a href="#">The Empire Strikes Back</a>
    </div>
    <div class="cell">
      <a href="#">Return of the Jedi</a>
    </div>
  </div>
</div>

CSS

.table {
  display: table;
  background-color: indigo;
  width: 600px;
}

.row {
  display: table-row;
  background-color: seagreen;
}

.cell {
  display: table-cell;
  text-align: center;
  vertical-align: middle;
}

a {
  padding: 10px;
  background-color: lightblue;
  display: inline-block;
  transition: 0.5s ease;
  width: 140px;
  height: 30px;
  line-height: 30px;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  text-decoration: none;
  color: black;
}

a.selected {
  background-color: blue;
  color: white;
}

JavaScript

var anchors = document.getElementsByTagName('a');

var onSelect = function () {
  var i, a;
  for (i = 0; i < anchors.length; i += 1) {
    a = anchors[i];
    if (a === this)
    	continue;
    a.classList.remove('selected');
  }
	this.classList.toggle('selected');
};

(function () {
  for (var i = 0; i < anchors.length; i += 1) {
    anchors[i].addEventListener('click', onSelect);
  }
}());