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

【问题标题】：Change background colour of whole div on hover悬停时更改整个div的背景颜色
【发布时间】：2017-11-09 06:31:35
【问题描述】：

我有以下布局：

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

【问题讨论】：

标签： html css

【解决方案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>

【讨论】：

【解决方案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;
}

【讨论】：