如何在悬停时更改无序列表中列表项的z-index？

Question

我正在尝试显示代表文档共同作者的圆圈，但是当文档过多时，我想将其折叠起来以减少占用空间。这看起来像这样：

这是简化的代码：

.precence-list {
  list-style-type: none;
  margin: 0;
  padding: 0;
}

.member-name {
  float: left;
  width: 15px;
  display: block;
  z-index: 0;
}

.member-name:hover {
  z-index: 10;
}

.member-icon {
  color: #FFFFFF;
  width: 30px;
  height: 30px;
  line-height: 30px;
  text-align: center;
  font-size: 14px;
  border-radius: 15px;
  cursor: pointer;
}

<ul class="precence-list">
  <li class="member-name">
    <div class="member-icon" style="background-color: #FB563C">AA</div>
  </li>
  <li class="member-name">
    <div class="member-icon" style="background-color: #66CC00">EE</div>
  </li>
  <li class="member-name">
    <div class="member-icon" style="background-color: #00BCD4">II</div>
  </li>
</ul>

我希望将悬停的列表项放在最前面。我以为我可以更改z-index，但这似乎行不通。

悬停似乎无济于事。是否有一种相对简单的方法将元素显示在最前面？ z-index的工作方式是什么？我更愿意在没有JavaScript的情况下执行此操作，但是如果那是唯一的方法，则会这样做。