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上的内容。是因为明确定义了高度参数吗？

Answer 1

它应该如何工作，但如果x = "something" x = None type(x) <type 'NoneType'> z = "asd" del z type(z) Traceback (most recent call last): File "<stdin>", line 1, in <module> NameError: name 'z' is not defined的内容溢出200px，div和任何其他继承背景颜色的子元素将显示黑色背景。

因此，例如，您的block / h3不会获得黑色背景，而是继承白色字体颜色，在这种情况下，使它们成为＆＃34;隐形＆＃34;在身体的白色背景下。

如果您希望div与其内容一起增长，请将其更改为h4，否则您可能应设置min-width: 200px;，以便滚动内容。

＆＃13;

overflow: auto

＆＃13;

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

＆＃13;

Answer 2

对我有用！尝试添加

background-color: black!important;

如果有效，那么CSS中的其他内容可能阻止其更改。

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

2 个答案: