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

标签 html css

我有以下布局:

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

最佳答案

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>

关于html - 悬停时更改整个 div 的背景颜色,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/47195296/

相关文章:

javascript - Bootstrap 轮播段落 slider

javascript - 如何通过JS更改CSS属性并使用过渡?

html - 如何让 2 个 div 继承父 div 中具有更高高度的 div 的高度?

css - 如何像div一样显示输入提交?

html - 如何禁用值

javascript - 如何使代码在多个图像上工作 - HTML 和 CSS

javascript - 如何使 css-menu 独立于菜单项的数量?

javascript - 一个按钮转换成一个简单的电子邮件表单

html - 如何居中对齐包含没有固定宽度的 float 的div

html - 4个额外的垂直像素?