悬停时更改 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 不会得到黑色背景，而是继承白色字体颜色，在这种情况下，使它们 "invisible" 与正文。

如果您希望 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>

Answer 2

对我有用！尝试添加

background-color: black!important;

如果可行，那么您的 CSS 中可能有其他东西阻止它更改。

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

Change background of a div of fixed height on hover

html

css