html - 在鼠标悬停时显示图像

Question

我正在尝试更好地学习 HTML/CSS，并且正在尝试修改现有模板 ( https://github.com/codrops/AnimatedGridLayout)。

该模板有一个网格布局，我正在努力使它在将鼠标悬停在网格项上时更改为显示图像。

在 HTML 中，代码如下所示:

               <a class="grid__item" href="#">
                    <h2 class="title title--preview">Demo</h2>
                    <div class="loader"></div>
                    <span class="category">Love &amp; Hate</span>
                    <div class="meta meta--preview">
                        <img class="meta__avatar" src="img/authors/2.png" alt="author02" /> 
                        <span class="meta__date"><i class="fa fa-calendar-o"></i> 7 Apr</span>
                        <span class="meta__reading-time"><i class="fa fa-clock-o"></i> 5 min read</span>
                    </div>
                </a>

在 CSS 中它看起来像这样:

a:hover, a:focus { 
color: #333; outline: none;
}


 /* Grid item */
.grid__item {
 padding: 45px 55px 30px;
 position: relative;
 color: inherit;
 background: #fff;
 min-height: 300px;
 cursor: pointer;
 text-align: center;
 display: -webkit-box;
 display: -webkit-flex;
 display: -ms-flexbox;
 display: flex;
 -webkit-box-direction: normal;
 -webkit-box-orient: vertical;
 -webkit-flex-direction: column;
 -ms-flex-direction: column;
  flex-direction: column;
  -webkit-justify-content: center;
  justify-content: center;
}

我添加了下面的代码，看看我是否可以在鼠标悬停时产生效果:

.grid__item:hover { 
    background-color: yellow;
}

然而，这并没有改变。这不是处理悬停的正确方法吗？

如有任何帮助，我们将不胜感激!

Answer 1

尝试在上面嵌套一个父类以使其正确...而不是 !important 尝试再嵌套一个父类使其优先级高

section.grid .grid_item:hover {
    background-color: yellow;
}