CSS 網格 hover 對子元素的影響不起作用

Question

我正在嘗試在 css 網格內的特定子元素上實現覆蓋 hover 效果，但它不起作用。

我在一個單獨的 div 上嘗試了相同的代碼，它工作得很好，當我使用 chrome 開發工具來激活 hover 效果時，它實際上是有效的，但是當我嘗試在它上面使用 hover 時只有我的鼠標，它不是。

我要添加疊加層的元素是.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}或僅在此 div 中的.item6和.item8中，否則position: absolute; div 相互疊加還為.item6和 .item8 添加 hover ZC7A62 .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; 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>