如何在绝对定位下实现悬停一个div时修改另一个div的样式

我来帮你搞定这个问题！你遇到的核心问题是CSS选择器无法选中当前元素之前的同级元素，结合你的DOM结构，我给你两种方案：纯CSS（需要小改DOM）和jQuery（无需改动结构），你可以按需选择。

纯CSS方案（需调整DOM顺序） #

CSS目前没有反向兄弟选择器，只能选中当前元素之后的同级元素，所以我们只要把触发hover的.m2wrap-hover移到DOM最前面，就能用通用兄弟选择器~选中后面的.m2wrap-back了。

修改后的HTML结构 #

<div class="m2wrap"> 
  <!-- 把hover元素移到最前面，不影响它的绝对定位覆盖效果 -->
  <div class="m2wrap-hover"></div> 
  <div class="m2wrap-back"> 
    <h3 class="m2wrap-back-title">Title</h3> 
  </div> 
  <h3 class="xhfb-text"> Some text here.. </h3> 
  <div class="m2wrap-bz1"></div> 
  <div class="m2wrap-bz2"></div> 
</div>

对应的CSS代码 #

我还加了过渡动画，让样式变化更平滑：

.m2wrap { position: relative } 
.m2wrap-back { 
  position: absolute; 
  top: 15px; 
  left: 0; 
  width: 110px; 
  height: 0; 
  text-align: center; 
  vertical-align: middle; 
  transition: all 0.3s ease; /* 过渡动画 */
  overflow: hidden; /* 避免高度为0时内容溢出 */
} 
.m2wrap-hover { 
  position: absolute; 
  width: 100%; 
  height: 100%; 
  z-index: 2; 
  border-radius: 4px; 
  opacity: 0.6; 
  cursor: pointer; 
} 
div.m2wrap-hover:hover { background-color: #bf0000; }

/* 关键：hover时修改.m2wrap-back的样式 */
div.m2wrap-hover:hover ~ .m2wrap-back {
  width: 150px;
  background-color: #f0f0f0;
  height: 40px;
  line-height: 40px; /* 让文字垂直居中 */
}

jQuery方案（无需修改DOM结构） #

如果不想调整现有DOM结构，用JS可以轻松实现，而且推荐用addClass/removeClass的方式，比直接写css()更易维护。

第一步：定义激活状态的CSS类 #

/* 给.m2wrap-back定义hover时的样式 */
.m2wrap-back.active {
  width: 150px;
  background-color: #f0f0f0;
  height: 40px;
  line-height: 40px;
  transition: all 0.3s ease;
  overflow: hidden;
}

第二步：jQuery事件绑定 #

$(document).ready(function() {
  // 监听hover事件：移入时加类，移出时移除类
  $('.m2wrap-hover').hover(
    function() {
      // 选中当前元素的同级.m2wrap-back，添加active类
      $(this).siblings('.m2wrap-back').addClass('active');
    },
    function() {
      // 移出时恢复原样式
      $(this).siblings('.m2wrap-back').removeClass('active');
    }
  );
});

为什么之前的相邻选择器没用？ #

你尝试的相邻选择器+只能选中紧挨着当前元素的下一个同级元素，但你的.m2wrap-hover前面的同级元素是.m2wrap-bz2，不是目标.m2wrap-back；而且CSS本身没有能力选中当前元素之前的同级元素，这就是导致选择器失效的根本原因。

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