【发布时间】：2021-01-29 04:22:09
【问题描述】：
我正在尝试在 CSS 网格内的特定子元素上实现覆盖悬停效果，但它不起作用。
我在一个单独的 div 上尝试了相同的代码，它工作得很好，当我使用 chrome 开发工具来激活悬停效果时，它实际上是有效的，但是当我试图只用我的鼠标悬停在它上面，它不是。
我尝试添加叠加层的元素是 .item3、.item6、.item8 类。
希望有人能帮帮我。
这是我的代码：
.item1 {
grid-area: first;
height: 391px;
background-image: url("https://magicezy.com/wp-content/uploads/2021/01/simple-reliable-innovatice-banner-2.jpg");
background-size: cover;
}
.item2 {
grid-area: second;
height: 92px;
background-image: url("https://magicezy.com/wp-content/uploads/2021/01/texture-1.jpg");
background-size: cover;
}
.item3 {
grid-area: third;
background-image: url("https://magicezy.com/wp-content/uploads/2021/01/Lifestyle-2.jpg");
background-size: cover;
}
.item4 { grid-area: fourth; }
.item5 { grid-area: fifth; }
.item6 {
grid-area: sixth;
background-image: url("https://magicezy.com/wp-content/uploads/2021/01/Home-and-Living-2.jpg");
background-size: cover;
}
.item7 { grid-area: seventh; }
.item8 {
grid-area: eight;
background-image: url("https://magicezy.com/wp-content/uploads/2021/01/Cars-and-Boats-1-1.jpg");
background-size: cover;
}
.item3, .item4{
height: 299px;
}
.item5, .item6, .item7, .item8{
height: 391px;
}
.grid-container {
font-family: 'roboto', 'sens-serif';
display: grid;
grid-template-areas:
'first first second second'
'first first second second'
'first first third fourth'
'fifth sixth seventh eight';
grid-template-columns: 25% 25% 19.7% 30.3%;
background-color: #FFF;
}
.grid-container > div {
background-color: rgba(255, 255, 255, 0.8);
text-align: left;
padding: 20px 20px;
font-size: 30px;
}
.home-category-title
{
font-size: 28px;
font-weight: 750;
}
.home-category-content
{
font-size: 18.5px;
padding-right: 40px;
line-height: 1.6;
padding-top: 15px;
}
.item3 {
position: relative;
}
.home-category-overlay {
position: absolute;
top: 0;
bottom: 0;
left: 0;
right: 0;
height: 100%;
width: 100%;
opacity: 0;
transition: .5s ease;
background-color: #008CBA;
}
.grid-container .item-3:hover .home-category-overlay {
opacity: .5;
}
.item3:hover .home-category-overlay {
opacity: .5;
}
.home-category-content-overlay {
color: white;
font-size: 20px;
position: absolute;
top: 90%;
left: 22%;
-webkit-transform: translate(-50%, -50%);
-ms-transform: translate(-50%, -50%);
transform: translate(-50%, -50%);
text-align: center;
} <div class="grid-container">
<div class="item1">
</div>
<div class="item2">
</div>
<div class="item3">
<div class="home-category-overlay">
<div class="home-category-content-overlay">Lifestyle</div>
</div>
</div>
<div class="item4">
<h3 class="home-category-title">LIFESTYLE</h3>
<div class="home-category-content">
Uncover the latest technology that perfectly blends with your everyday needs. May it be DIY scratch
repairs or future innovations.
</div>
</div>
<div class="item5">
<h3 class="home-category-title">HOME & LIVING</h3>
<div class="home-category-content">
Wonder in awe of MagicEzy’s surface repair kits made to make DIY floor, tile, appearance, or even
kitchen & bathroom repairs look pro
</div>
</div>
<div class="item6">
<div class="home-category-overlay">
<div class="home-category-content-overlay">Home & Living</div>
</div>
</div>
<div class="item7">
<h3 class="home-category-title">CARS & <p>BOATS</h3>
<div class="home-category-content">
Explore MagicEzy’s top of the line DIY scratch removers, non-drip paint chip repair kits, fiberglass and
gelcoat boat repair kit ready to sail & journey with you
</div>
</div>
<div class="item8">
<div class="home-category-overlay">
<div class="home-category-content-overlay">Cars & Boats</div>
</div>
</div>
</div>【问题讨论】：
-
尝试将
z-index: 10; position:relative添加到.item3、.item6和.item8
标签： html css animation hover css-grid