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

将此代码添加到css / style2.css

a.grid__item:hover {
    background: red;
}

如果这不起作用，请尝试

a.grid__item:hover {
    background: red !important;
}

如果仍然无效，请尝试清除浏览器缓存CTRL + SHIFT + DEL这几乎适用于Windows上的每个浏览器

在mouseover

1 个答案: