在悬停时更改整个div的背景颜色

Question

我有以下布局：

.index-card :hover {
    background-color: lightgoldenrodyellow;
}

这个CSS规则：

.index-card

然而，当我将鼠标悬停在.card-symbol div中的空白区域时，没有任何反应。当我将鼠标悬停在单个子div上时，例如.index-card，那么只有该内部div的背景颜色会发生变化。

如何在悬停时使/ div更改颜色的整个背景？另外，为什么整个div不会改变颜色？ CSS规则不适用于内部div，而是适用于整个外部div。

Answer 1

CSS中类之后的空格，这会导致所有子元素都应用了属性。删除空格，删除问题

.index-card {
  background: white;
}

.index-card:hover {
  background: red;
}

<div class="index-card" data-card-index="5">
    <div class="row">
        <div class="col-md-12 text-center">
            5
        </div>
    </div>
    <div class="row">
        <div class="col-md-12 text-center card-symbol">
            ה
        </div>
    </div>
    <div class="row">
        <div class="col-md-12 text-center"><i>He</i></div>
    </div>
    <div class="row">
        <div class="col-md-12 text-center">
            <i>H</i>
        </div>
    </div>
</div>

Answer 2

.my-card {
  background-color: white;
}

.my-card:hover {
  background-color: green;
}

如果您想要过渡以便可以使用它transition: 0.5s;

.my-card {
   background-color: white;
   transition: 0.5s;
}
.my-card:hover {
  background-color: white;
}