html - 悬停时更改固定高度的 div 的背景

Question

我有一个简单的 div，如下所示:

.block {
  height: 200px;
  color: black;
  background-color: white;
}
.block:hover {
  color: white;
  background-color: black;
}

<div class="block">
  <h3>Something</h3>
  <br>
  <h4>Some other heading</h4>
</div>

看起来很简单。但问题是悬停效果仅适用于内容而不适用于整个 div。是因为显式定义了height参数吗？

Answer 1

它按应有的方式工作，但如果您的 block 的内容将溢出 200px，则 div 和任何其他继承背景颜色的子元素将显示黑色背景。

例如，您的h3/h4 不会得到黑色背景，而是继承白色字体颜色，在这种情况下，使它们在白色背景下“不可见” body 。

如果你想让div随着它的内容增长，把它改成min-width: 200px;，否则你可能应该设置overflow: auto，所以它滚动内容。

.block {
  min-height: 200px;
  color: black;
  background-color: white;
}
.block:hover {
  color: white;
  background-color: black;
}

<div class="block">
  <h3>Something</h3>
  <br>
  <h4>Some other heading</h4>
  <br>
  <h4>Some other heading</h4>
  <br>
  <h4>Some other heading</h4>
</div>