时间戳

首页 > 解决方案 > 悬停 div 更改另一个 div 不起作用

html - 悬停 div 更改另一个 div 不起作用

问题描述

当我将鼠标悬停在按钮上时，div 不会改变 book div 的颜色。我无法理解。

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

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

.button:hover .book {
  background-color: pink;
}
<div class="book">
  BOOK
</div>
<div class="button">
  BUTTON
</div>

标签： htmlcss

解决方案

使用 Javascript 的解决方案：

function chbg(color) {
  document.getElementById('book').style.backgroundColor = color;
}
<div id="book">Div book</div>
<div id="button" onmouseover="chbg('red')" onmouseout="chbg('white')">Div button</div>

推荐阅读