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

Question

我有以下布局:

<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>

还有这个 CSS 规则:

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

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

如何使 .index-card 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>