CSS鼠标悬浮改变相邻元素样式

效果：

Hover me! X

---

源码：

<div class="chip">
  <span class="name">Hover me!</span>
  <span class="close-bth">X</span>
</div>

.chip {
  display: flex;
  width: fit-content;
  font-size: 20px;
  text-align: center;
  background-color: #ccc;
}

.chip .name { width: 120px; }
.chip .close-bth { width: 30px; }

.chip .name:hover,
.chip .name:hover + .close-bth,
.chip .close-bth:hover {
  color: white;
  background-color: #888;
}

CodePen link:
https://codepen.io/iMaeGoo/pen/jRqYRJ

hmmmm…这种实现也没什么难的，其实是想试试在博文中插入HTML啦。