hover button元素时修改另一book div背景色不生效如何解决

问题根因 #

你使用的.button:hover .book属于后代选择器，仅会匹配被.button元素包裹的内部.book子元素，和你当前的HTML结构完全不匹配。另外CSS目前没有原生支持选择前序同级元素的语法，现有结构下无法用纯CSS实现需求，可选择以下两种方案解决：

方案1：调整HTML元素顺序，纯CSS实现 #

如果允许调整元素位置，把.button放到.book前面，用相邻兄弟选择器+匹配后续紧邻的.book元素：

修改后HTML代码

<div class="button">
  BUTTON
</div>
<div class="book">
  BOOK
</div>

修改后CSS代码

.book {
  height: 100px;
  width: 100px;
  background-color: blue;
}

.button {
  height: 40px;
  width: 100px;
  background-color: black;
  color: white;
}

/* 用相邻兄弟选择器匹配button后面的book */
.button:hover + .book {
  background-color: pink;
}

方案2：不改动HTML结构，用JS实现 #

如果不能调整元素顺序，直接监听.button的鼠标事件修改.book样式即可：

const button = document.querySelector('.button')
const book = document.querySelector('.book')

// 鼠标移入button时修改背景色
button.addEventListener('mouseenter', () => {
  book.style.backgroundColor = 'pink'
})
// 鼠标移出时恢复原有颜色
button.addEventListener('mouseleave', () => {
  book.style.backgroundColor = 'blue'
})

内容的提问来源于stack exchange，提问作者Dinesh.r