CSS 子元素上的网格悬停效果不起作用

Question

我正在尝试在 css 网格内的特定子元素上实现叠加悬停效果，但它不起作用。

我在单独的 div 上尝试了相同的代码，它工作得很好，当我使用 chrome 开发工具激活悬停效果时，它在事实上有效，但是当我试图用我的鼠标悬停在它上面时，它不是。

我要添加叠加层的元素是 .item3、.item6、.item8 class。

希望有人能帮助我。

这是我的代码：

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

Answer 1

您需要将 position:relative 添加到所有 div 项目中，像这样 .grid-container > div {position:relative} 或者仅在 .item6 和 .item8 中添加 div否则 position: absolute; div 相互叠加也为 .item6 和 .item8

添加悬停 css

.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;
  position:relative;
}

.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,
.item6:hover .home-category-overlay,
.item8: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>

CSS 子元素上的网格悬停效果不起作用

CSS Grid hover effect on Child Element not working

html

css

animation

hover

css-grid