同一div内按钮hover时如何改变div背景色？外部按钮代码已生效

嘿，我懂你碰到的麻烦了！你原来的CSS用了相邻兄弟选择器.btn+.card，但这个选择器是用来选按钮后面和它同级的card元素的——可现在按钮是card的子元素，这俩根本不是同级关系，所以这个选择器完全起不了作用。

下面给你两种可行的解决方案：

方案一：CSS :has() 伪类（现代浏览器支持） #

:has() 是个很实用的CSS伪类，它能让父元素根据子元素的状态来改变自身样式。正好适合你的场景：当card里面的按钮被hover时，改变card的背景色。

修改后的代码如下：

<style>
.card {
  height: 20em;
  width: 10em;
  border: 1px solid #222;
  position: relative; /* 给按钮的absolute定位做参考 */
  transition: background-color 0.3s; /* 加个过渡动画更丝滑 */
}

.btn {
  position: absolute;
  bottom: 0;
}

/* 核心：当card包含的.btn被hover时，改变card的背景色 */
.card:has(.btn:hover) {
  background-color: black;
}
</style>

<div class="col-lg-3 col-md-4 col-sm-6 col-xs-12 card">
  <button class="btn btn-primary">Hover me</button>
</div>

注意：:has() 目前在Chrome、Firefox（版本121+）、Safari等现代浏览器都支持，但旧版浏览器比如IE完全不支持，如果需要兼容旧环境，建议用下面的JS方案。

方案二：JavaScript 兼容方案 #

如果要兼顾更多浏览器，用JS监听按钮的鼠标事件，手动给card添加/移除样式类：

<style>
.card {
  height: 20em;
  width: 10em;
  border: 1px solid #222;
  position: relative;
  transition: background-color 0.3s;
}

.btn {
  position: absolute;
  bottom: 0;
}

/* 定义hover时的样式类 */
.card-hover {
  background-color: black;
}
</style>

<div class="col-lg-3 col-md-4 col-sm-6 col-xs-12 card">
  <button class="btn btn-primary">Hover me</button>
</div>

<script>
const btn = document.querySelector('.btn');
const card = btn.closest('.card'); // 找到按钮所在的card元素

// 监听鼠标移入事件
btn.addEventListener('mouseover', () => {
  card.classList.add('card-hover');
});

// 监听鼠标移出事件
btn.addEventListener('mouseout', () => {
  card.classList.remove('card-hover');
});
</script>

这个方案兼容性更好，几乎所有浏览器都能正常运行，而且逻辑也很清晰：找到按钮对应的父card，鼠标移上去就加样式类，移开就移除。

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