按鈕懸停將更改div和兩個塊之間的圖片

Question

我試圖做css基於懸停的背景和圖片顯示懸停在主div的按鈕/鏈接只。

問題是，背景顏色顯示在整個頁面上，並不僅限於那些我嘗試所有這些東西的div塊。

這裏是代碼：

<div class="suction"> 
<ul class="menu"> 
    <div class="block"> 
    <li><a href="#">h</a></li> 
    <li><a href="#">g</a></li> 
    <li><a href="#">i</a></li> 
    <li class="bg"></li> 
    </div> 
    <div class="block"> 
    <li><a href="#">p</a></li> 
    <li><a href="#">l</a></li> 
    <li><a href="#">m</a></li> 
    <li class="bg"></li> 
    </div> 
</ul> 

這裏是CSS：

* { 
    margin: 0; 
    padding: 0; 
} 
body { 
     background: #e5e5e5; 
    } 

suction { 
     margin:0 auto; 
    max-width:100%; 
    height: 400px; 
} 

.block { 
    width: 20%; 
    padding: 25px 0; 
    display: inline-block; 
    margin: 10px; 
} 

.bg { 
    position: fixed; 
    z-index: -1; 
    top: 0; 
    right: 0; 
    bottom: 0; 
    left: 0; 
    transition: .25s; 
    pointer-events: none; 
} 

li { 
    list-style: none; 
} 

li a { 
    display: block; 
    float: ; 
    width: 20%; 
    padding: 25px 0; 
    text-align: center; 
    font-family: 'HeydingsCommonIconsRegular', Helvetida Neue, sans-serif; 
    font-weight: 700; 
    letter-spacing: 1px; 
    font-size: 40px; 
    color: #fff; 
    background: #ccc; 
    text-decoration: none; 
    text-transform: uppercase; 
    text-shadow: 2px 2px 0 rgba(0, 0, 0, .25); 
    transition: .25s; 
} 

li a:hover { 
    margin: -10px 0 0 0; 
} 

.ajabmenu { 
    margin: 60px auto 0 auto; 
    border-radius: 10px; 
    overflow: hidden; 
    display: block 
} 

.ajabmenuu li:first-child a { 
    background: #ffca6d !important; 
} 

.ajabmenu li:nth-child(2) a { 
    background: #ff6d6d !important; 
} 

.ajabmenu li:nth-child(3) a { 
    background: #6dffb9 !important; 
} 

.ajabmenu li:nth-child(4) a { 
    background: #6dcaff !important; 
} 

.ajabmenu li:nth-child(5) a { 
    background: #ec6dff !important; 
} 

.ajabmenu li:first-child:hover ~ .bg { 
    background: #ffca6d url("https://www.drupal.org/files/images/druplicon-polska-small.png") no-repeat center top fixed; 
} 

.ajabmenu li:nth-child(2):hover ~ .bg { 
    background: #ff6d6d; 
} 

.ajabmenu li:nth-child(3):hover ~ .bg { 
    background: #6dffb9; 
} 

.ajabmenu li:nth-child(4):hover ~ .bg { 
    background: #6dcaff; 
} 

.ajabmenu li:nth-child(5):hover ~ .bg { 
    background: #ec6dff; 
} 

Codepen link

一切都應該在 '吸' 塊和永不熄滅。我試圖從.bg中刪除固定的，但它不起作用。

請讓我知道是否有任何好方法或簡單的方法來做到這一點。

Answer 1

好的，第一個解決方案不起作用。試試這個：

你絕對需要丟失你的'吸'類的背景顏色，但是這個codepen的作品。

Codepen

我所做的是基本放置點（。），你的「吸」課前，因爲它沒有做任何事情，改變背景透明，並改變你的.bg固定位置類別爲絕對值，寬度/高度爲100％。

這裏是重要的類：

.suction { 
    width: 50%; 
    background: transparent; 
    margin: 10px auto; 
    position: relative; 
    text-align:center; 
} 


.bg { 
    z-index: -1; 
    position: absolute; 
    top: 0; 
    left: 0; 
    transition: .25s; 
    pointer-events: none; 
    width: 100%; 
    height: 100%; 
}