chrome bug

by dru_zod

HTML

<div class="table">
	<div class="row">
    <div class="cell">
      <a href="#"><span>A New Hope</span><span class="selectedOnly">A New Hope</span></a>
    </div>
    <div class="cell">
      <a href="#"><span>The Empire Strikes Back</span><span class="selectedOnly">The Empire Strikes Back</span></a>
    </div>
      <a href="#"><span>Return of the Jedi</span><span class="selectedOnly">Return of the Jedi</span></a>
  </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;
}

a span.selectedOnly {
  color: white;
  display: none;
}

a.selected span {
  display: none;
}

a.selected span.selectedOnly {
  display: inline;
}

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);
  }
}());