如何用CSS实现蜂窝状边框及Hover联动变色效果？

嘿，这个需求挺有意思的！不用JavaScript纯CSS完全可以实现，咱们分两种常见的蜂窝形态来拆解方案，你可以根据实际需求选：

一、矩形交错式蜂窝（适合简单布局） #

这种是类似网格交错排列的蜂窝，核心思路是用伪元素模拟侧边水平线，配合CSS Grid实现布局，再通过hover选择器和相邻兄弟选择器实现联动变色。

1. HTML结构 #

<ul class="honeycomb-grid">
  <li class="honeycomb-cell">项目1</li>
  <li class="honeycomb-cell">项目2</li>
  <li class="honeycomb-cell">项目3</li>
  <li class="honeycomb-cell">项目4</li>
  <li class="honeycomb-cell">项目5</li>
  <li class="honeycomb-cell">项目6</li>
</ul>

2. CSS实现 #

/* 重置列表样式 */
.honeycomb-grid {
  list-style: none;
  padding: 0;
  margin: 3rem auto;
  width: fit-content;
  /* Grid布局实现交错蜂窝 */
  display: grid;
  grid-template-columns: repeat(3, 140px);
  gap: 0;
}

/* 让偶数位的单元格向下偏移，形成交错 */
.honeycomb-cell:nth-child(even) {
  margin-top: 40px;
}

/* 单元格基础样式 */
.honeycomb-cell {
  position: relative;
  width: 140px;
  height: 80px;
  display: flex;
  align-items: center;
  justify-content: center;
  /* 上下边框 */
  border-top: 2px solid #ccc;
  border-bottom: 2px solid #ccc;
  background-color: #fff;
  transition: border-color 0.3s ease;
}

/* 左侧水平线（用伪元素模拟） */
.honeycomb-cell::before {
  content: "";
  position: absolute;
  left: -1px;
  top: 0;
  width: 2px;
  height: 100%;
  background-color: #ccc;
  transition: background-color 0.3s ease;
}

/* 右侧水平线（用伪元素模拟） */
.honeycomb-cell::after {
  content: "";
  position: absolute;
  right: -1px;
  top: 0;
  width: 2px;
  height: 100%;
  background-color: #ccc;
  transition: background-color 0.3s ease;
}

/* 隐藏首尾单元格的多余线条 */
.honeycomb-cell:first-child::before,
.honeycomb-cell:last-child::after {
  display: none;
}

/* Hover联动效果 */
.honeycomb-cell:hover {
  border-color: #2563eb; /* 自定义hover颜色 */
}
.honeycomb-cell:hover::before,
.honeycomb-cell:hover::after {
  background-color: #2563eb;
}
/* 让hover单元格的右侧相邻单元格左侧线条同步变色 */
.honeycomb-cell:hover + .honeycomb-cell::before {
  background-color: #2563eb;
}

二、六边形蜂窝（更贴近真实蜂窝形态） #

如果要做真实的六边形蜂窝，需要用clip-path实现六边形形状，再通过伪元素处理边框（因为原生border在clip-path下会有边角问题），hover时同步改变边框颜色。

1. HTML结构 #

和上面的结构一样，复用即可。

2. CSS实现 #

.honeycomb-grid {
  list-style: none;
  padding: 0;
  margin: 3rem auto;
  width: fit-content;
  display: grid;
  grid-template-columns: repeat(3, 140px);
  gap: 70px; /* 六边形宽度的一半，保证相邻单元格贴合 */
}

/* 偶数位单元格向上偏移，实现交错 */
.honeycomb-cell:nth-child(even) {
  margin-top: -70px;
}

.honeycomb-cell {
  position: relative;
  width: 140px;
  height: 161.66px; /* 六边形高度 = 宽度 × √3，约1.1547倍 */
  display: flex;
  align-items: center;
  justify-content: center;
  background-color: #fff;
  /* 用clip-path裁剪出六边形 */
  clip-path: polygon(50% 0%, 100% 25%, 100% 75%, 50% 100%, 0% 75%, 0% 25%);
  transition: all 0.3s ease;
}

/* 用伪元素模拟六边形边框（解决原生border在clip-path下的边角问题） */
.honeycomb-cell::before {
  content: "";
  position: absolute;
  inset: 2px; /* 边框宽度，和下面的border-width对应 */
  background-color: #fff;
  clip-path: inherit;
}

/* 基础边框颜色 */
.honeycomb-cell {
  border: 2px solid #ccc;
}

/* Hover时同步改变边框颜色 */
.honeycomb-cell:hover {
  border-color: #2563eb;
}

关键思路总结 #

• 布局实现：用CSS Grid + nth-child选择器实现蜂窝的交错排列，比flex更易控制。
• 边框/线条控制：矩形蜂窝用伪元素模拟侧边水平线，方便联动；六边形蜂窝用clip-path裁剪形状，配合伪元素解决原生边框的显示问题。
• Hover联动：利用CSS的:hover选择器控制自身样式，再通过相邻兄弟选择器（+）实现相邻元素的线条同步变色，完全不需要JS。

内容的提问来源于stack exchange，提问作者Mr.Pickles