<button>第一个</button>
<button>第二个</button>
<button>第三个</button>
<p>hover的会变紫色实心边框，前一个会变为粉色点状边框，后一个会变成红色虚线边框</p>

button {
  width: 200px;
  height: 80px;
  font-size: 20px;
}

/* 当前hover的样式 */
button:is(:hover, :focus-visible) {
  outline: 5px solid #649;
}

/* hover某一个时，后一个的样式 */
button:is(:hover, :focus-visible)+button {
  outline: 5px dashed #f00;
}

/* hover某一个时，前一个的样式 */
button:has(+ button:is(:hover, :focus-visible)) {
  outline: 5px dotted #ff69b4;
}