咨询Bootstrap行中组合DIV盒子实现单独悬停效果的方法

嘿，我明白你现在的痛点——本来只想让单个「图片+文本」的组合触发hover，结果整行都跟着变色，或者所有同类型盒子一起动，确实闹心。给你几个不同场景下的解决方案，按需选择就行：

方法1：调整HTML结构（最推荐，简洁可靠） #

其实最省心的方式是把每组「图片+文本」的盒子包在一个父容器里，这样用纯CSS就能轻松实现精准控制，完全不用绕弯子。

修改后的HTML结构是这样的：

<div class="row">
  <!-- 第一组：图片+文本 -->
  <div class="col-md-6 box-group">
    <div class="col-md-6 box-left">Image 1</div>
    <div class="col-md-6 box-right">Text 1</div>
  </div>
  <!-- 第二组：图片+文本 -->
  <div class="col-md-6 box-group">
    <div class="col-md-6 box-left">Image 2</div>
    <div class="col-md-6 box-right">Text 2</div>
  </div>
</div>

这里把原来的两个col-md-3改成col-md-6，塞进col-md-6的父容器box-group里——毕竟Bootstrap是12列网格，两个col-md-6刚好占满一组的宽度，两组加起来就是整行，布局和原来完全一致。

对应的CSS就很简单了：

.box-group:hover .box-left,
.box-group:hover .box-right {
  background-color: #d3ecfb;
}

现在不管你悬停在组里的图片还是文本上，整个组合的背景色都会一起变化，完美符合你的需求。

方法2：不修改HTML，用jQuery实现 #

如果因为项目限制没法改HTML结构，那用jQuery来定位目标元素就很靠谱：

// 给所有box-left和box-right绑定hover事件
$('.box-left, .box-right').hover(
  function() {
    const $current = $(this);
    // 如果是左盒子，就给自己和右边的兄弟加样式类
    if ($current.hasClass('box-left')) {
      $current.addClass('hover-bg').next('.box-right').addClass('hover-bg');
    } else {
      // 如果是右盒子，就给自己和左边的兄弟加样式类
      $current.addClass('hover-bg').prev('.box-left').addClass('hover-bg');
    }
  },
  function() {
    const $current = $(this);
    // 鼠标离开时移除样式类
    if ($current.hasClass('box-left')) {
      $current.removeClass('hover-bg').next('.box-right').removeClass('hover-bg');
    } else {
      $current.removeClass('hover-bg').prev('.box-left').removeClass('hover-bg');
    }
  }
);

然后加上对应的CSS类：

.hover-bg {
  background-color: #d3ecfb;
}

这个逻辑很清晰：hover左盒子时，选中它自己和下一个右盒子；hover右盒子时，选中它自己和前一个左盒子，通过添加/移除类来切换背景色，不会影响其他组合。

方法3：纯CSS技巧（注意兼容性） #

如果你不想用JS，也可以试试CSS的:has()选择器，但要注意它只支持现代浏览器（IE完全不支持，旧版Chrome/Firefox也不行）：

/* 把row改成flex布局，保证兄弟元素的位置关系 */
.row {
  display: flex;
  flex-wrap: wrap;
}

/* hover左盒子时，选中自己和右边的兄弟 */
.box-left:hover,
.box-left:hover + .box-right,
/* hover右盒子时，通过父容器:has选中自己和左边的兄弟 */
.row:has(.box-right:hover) .box-right ~ .box-left {
  background-color: #d3ecfb;
}

这个方法的局限性比较大，适合只需要兼容现代浏览器的场景，如果项目要求兼容旧版浏览器，还是优先选前两种方法。

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