如何定位带悬停效果的圆形元素？支持类似棋盘的行列布局吗？

需求说明 #

你希望将带悬停效果的圆形元素按照类似棋盘的行列（比如E3、F7）来精准定位，目前尝试用columns但没找到正确用法，想要从当前的排列效果调整到目标的棋盘式布局。

解决方案：用CSS Grid实现精准行列定位 #

CSS Grid是最适合这种棋盘/表格式布局的方案，我们可以直接定义网格的行和列，然后给每个元素指定它所在的行和列位置，完全匹配你想要的棋盘坐标逻辑。

步骤1：调整HTML结构 #

把所有圆形元素放进一个Grid容器里，同时给每个元素添加对应棋盘位置的类名：

<div class="grid-container">
  <!-- 定位到E3的元素 -->
  <div class="ih-item circle effect13 from_left_and_right grid-item e3">
    <a href="#">
      <div class="img"><img src="img/4.jpg" alt="img"></div>
      <div class="info">
        <div class="info-back">
          <h3>Heading here</h3>
          <p>Description goes here</p>
        </div>
      </div>
    </a>
  </div>

  <!-- 定位到F7的彩色元素 -->
  <div class="ih-item circle colored effect13 from_left_and_right grid-item f7">
    <a href="#">
      <div class="img"><img src="img/4.jpg" alt="img"></div>
      <div class="info">
        <div class="info-back">
          <h3>Heading here</h3>
          <p>Description goes here</p>
        </div>
      </div>
    </a>
  </div>

  <!-- 定位到C5的上下悬停效果元素 -->
  <div class="ih-item circle effect13 top_to_bottom grid-item c5">
    <a href="#">
      <div class="img"><img src="img/4.jpg" alt="img"></div>
      <div class="info">
        <div class="info-back">
          <h3>Heading here</h3>
          <p>Description goes here</p>
        </div>
      </div>
    </a>
  </div>
</div>

步骤2：添加Grid布局的CSS #

先定义网格容器的行列规则，再给每个位置类指定对应的行列位置：

/* 网格容器：模拟8x8棋盘，可根据需求调整行列数 */
.grid-container {
  display: grid;
  /* 定义8列（对应A-H），每列宽度均等 */
  grid-template-columns: repeat(8, 1fr);
  /* 定义8行，每行高度可自定义 */
  grid-template-rows: repeat(8, 100px);
  /* 元素之间的间距 */
  gap: 12px;
  padding: 20px;
}

/* 通用网格项样式，确保圆形元素居中显示 */
.grid-item {
  width: 100%;
  height: 100%;
  display: flex;
  align-items: center;
  justify-content: center;
}

/* 定位E3：E是第5列（A=1、B=2...E=5），3是第3行 */
.e3 {
  grid-column: 5;
  grid-row: 3;
}

/* 定位F7：F是第6列，7是第7行 */
.f7 {
  grid-column: 6;
  grid-row: 7;
}

/* 定位C5：C是第3列，5是第5行 */
.c5 {
  grid-column: 3;
  grid-row: 5;
}

/* 保留你原有的悬停效果CSS */
.ih-item.square.effect13 { overflow: hidden; } 
.ih-item.square.effect13.colored .info { background: #1a4a72; background: rgba(26, 74, 114, 0.6); } 
.ih-item.square.effect13.colored .info h3 { background: rgba(12, 34, 52, 0.6); } 
.ih-item.square.effect13 .img { -webkit-transition: all 0.35s ease-in-out; -moz-transition: all 0.35s ease-in-out; transition: all 0.35s ease-in-out; -webkit-transform: scale(1); -moz-transform: scale(1); -ms-transform: scale(1); -o-transform: scale(1); transform: scale(1); } 
.ih-item.square.effect13 .info { background: #333333; background: rgba(0, 0, 0, 0.6); visibility: hidden; opacity: 0; pointer-events: none; -webkit-transition: all 0.35s ease-in-out; -moz-transition: all 0.35s ease-in-out; transition: all 0.35s ease-in-out; } 
.ih-item.square.effect13 .info h3 { text-transform: uppercase; color: #fff; text-align: center; font-size: 17px; padding: 10px; background: #111111; margin: 30px 0 0 0; } 
.ih-item.square.effect13 .info p { font-style: italic; font-size: 12px; position: relative; color: #bbb; padding: 20px 20px 20px; text-align: center; } 
.ih-item.square.effect13 a:hover .img { -webkit-transform: scale(1.2); -moz-transform: scale(1.2); -ms-transform: scale(1.2); -o-transform: scale(1.2); transform: scale(1.2); } 
.ih-item.square.effect13 a:hover .info { visibility: visible; opacity: 1; } 
.ih-item.square.effect13.left_to_right .info { -webkit-transform: translateX(-100%); -moz-transform: translateX(-100%); -ms-transform: translateX(-100%); -o-transform: translateX(-100%); transform: translateX(-100%); } 
.ih-item.square.effect13.left_to_right a:hover .info { -webkit-transform: translateX(0); -moz-transform: translateX(0); -ms-transform: translateX(0); -o-transform: translateX(0); transform: translateX(0); } 
.ih-item.square.effect13.right_to_left .info { -webkit-transform: translateX(100%); -moz-transform: translateX(100%); -ms-transform: translateX(100%); -o-transform: translateX(100%); transform: translateX(100%); } 
.ih-item.square.effect13.right_to_left a:hover .info { -webkit-transform: translateX(0); -moz-transform: translateX(0); -ms-transform: translateX(0); -o-transform: translateX(0); transform: translateX(0); } 
.ih-item.square.effect13.top_to_bottom .info { -webkit-transform: translateY(-100%); -moz-transform: translateY(-100%); -ms-transform: translateY(-100%); -o-transform: translateY(-100%); transform: translateY(-100%); } 
.ih-item.square.effect13.top_to_bottom a:hover .info { -webkit-transform: translateY(0); -moz-transform: translateY(0); -ms-transform: translateY(0); -o-transform: translateY(0); transform: translateY(0); } 
.ih-item.square.effect13.bottom_to_top .info { -webkit-transform: translateY(100%); -moz-transform: translateY(100%); -ms-transform: translateY(100%); -o-transform: translateY(100%); transform: translateY(100%); } 
.ih-item.square.effect13.bottom_to_top a:hover .info { -webkit-transform: translateY(0); -moz-transform: translateY(0); -ms-transform: translateY(0); -o-transform: translateY(0); transform: translateY(0); }

关键说明 #

• 行列数可以自由调整：如果只需要A-F共6列，把grid-template-columns改成repeat(6, 1fr)即可；行高也可以换成auto或其他数值适配你的需求。
• 坐标逻辑简单直观：列从左到右对应A=1、B=2...，行从上到下对应1、2...，完全匹配棋盘坐标的使用习惯。
• 原有悬停效果完全保留：Grid只是改变布局，不会影响你已经写好的悬停动画。

内容的提问来源于stack exchange，提问作者kasia1994