當懸停按鈕Css時在頁面上顯示背景圖像

Question

我一直在嘗試通過將圖像轉換到我的網站的背景來設置我的外部容器的背景圖像。但沒有任何顯示，是否有什麼我在CSS中丟失，這將允許我顯示背景圖像？

筆：https://codepen.io/chriskaram/pen/BwVXGq 頁：https://mydietgoal.com/mydietgoal-features-and-plans/

<div class="outer-container" id="backgroundDiv" style="width: max-content; height: max-content;"> 

    <div class="container container1"> 
     <div class="w-table"> 
     <div class="w-table-cell"> 
      <div class="w-container"> 
      <div class="w-card color-green"> 

         <div class="card-header"> 
       <div class="w-title" style="cursor:default"> 
        <h2><font size="7px">Novice</font></h2> 
       </div> 
       <div class="w-price" style="cursor:default"> 
        $4.99 
        <h3>/ Week</h3> 
       </div> 
       <div class="container-button"> 
        <a class="w-button" id="btn1" href="/meal-planner" target="_blank">Sign up </a> 
       </div> 
       </div> 

       <div class="card-content" style="cursor:default"> 
       <div class="w-item" style="cursor:default"> 
        <span>Weekly </span>Meal Plans 
       </div> 
       <div class="w-item" style="cursor:default"> 
        <span>Personal </span>Dietary Assessment and Advice 
       </div> 
       <div class="w-item" style="cursor:default"> 
        <span>Full </span>Access to the <a href="/mydietgoal-dietary-catalogue">Food Catalogue</a> 
       </div> 
         </div> 

        </div> 
       </div> 
      </div> 
     </div> 
    </div> 

    <div class="container container2"> 
     <div class="w-table"> 
     <div class="w-table-cell"> 
      <div class="w-container"> 
      <div class="w-card color-blue"> 

       <div class="card-header"> 
       <div class="w-title" style="cursor:default"> 
        <h2><font size="7px">Novice</font></h2> 
       </div> 
       <div class="w-price" style="cursor:default"> 
        $9.99 
        <h3>/ Week</h3> 
       </div> 
       <div class="container-button"> 
        <a class="w-button" href="/meal-planner" target="_blank">Sign up </a> 
       </div> 
       </div> 

       <div class="card-content" style="cursor:default"> 
       <div class="w-item" style="cursor:default"> 
        <span>Weekly </span>Meal Plans 
       </div> 
       <div class="w-item" style="cursor:default"> 
        <span>Personal </span>Dietary Assessment and Advice 
       </div> 
       <div class="w-item" style="cursor:default"> 
        <span>Full </span>Access to the <a href="/mydietgoal-dietary-catalogue">Food Catalogue</a> 
       </div> 
         </div> 

        </div> 
       </div> 
      </div> 
     </div> 
    </div> 

    <div class="container container3"> 
     <div class="w-table"> 
      <div class="w-table-cell"> 
      <div class="w-container"> 
      <div class="w-card color-orange"> 

       <div class="card-header"> 
       <div class="w-title" style="cursor:default"> 
        <h2><font size="7px">Novice</font></h2> 
       </div> 
       <div class="w-price" style="cursor:default"> 
        $4.99 
        <h3>/ Week</h3> 
       </div> 
       <div class="container-button"> 
        <a class="w-button" href="/meal-planner" target="_blank">Sign up </a> 
       </div> 
       </div> 

       <div class="card-content" style="cursor:default"> 
       <div class="w-item" style="cursor:default"> 
        <span>Weekly </span>Meal Plans 
       </div> 
       <div class="w-item" style="cursor:default"> 
        <span>Personal </span>Dietary Assessment and Advice 
       </div> 
       <div class="w-item" style="cursor:default"> 
        <span>Full </span>Access to the <a href="/mydietgoal-dietary-catalogue">Food Catalogue</a> 
       </div> 
       </div> 

        </div> 
       </div> 
      </div> 
     </div> 
    </div> 

</div> 

Answer 1

這個代碼塊

#btn1:hover + .outer-container { 
    background-image: url(https://static1.squarespace.com/static/59a7820e2994ca11766093d3/t/59dbd720f5e2317170edb5bf/1507579681913/vegetables-fresh-healthy-food-my-diet-goal-hd.jpg); 
    -webkit-background-size: cover; 
    -moz-background-size: cover; 
    -o-background-size: cover; 
    background-size: cover; 
} 

指當#btn是:hover，所述next direct sibling與.outer-container得到background-image。

但是，根據您的密碼，.outer-container是#btn的盛大盛大盛大祖父母。所以它不會工作。

壞消息是，CSS無法選擇祖先。

所以我建議你使用JavaScript來做到這一點。

Working Example

Answer 2

CSS只允許後裔以及兄弟選擇，它不支持應用樣式到父。 https://developer.mozilla.org/en-US/docs/Web/CSS/Adjacent_sibling_selectors

爲了達到這種效果，你想在同一水平與懸停觸發按鈕被放置，固定或絕對的（你需要改變你的標記來支持絕對）

這裏一個div是一個例子：

.bg, 
.bg2 { 
    position: fixed; 
    width: 100%; 
    top: 0; 
    left: 0; 
    height: 100%; 
    z-index: -1; 
} 

#btn1:hover + .bg, 
.bg2 { 
    background-image: url(https://static1.squarespace.com/static/59a7820e2994ca11766093d3/t/59dbd720f5e2317170edb5bf/1507579681913/vegetables-fresh-healthy-food-my-diet-goal-hd.jpg); 
    -webkit-background-size: cover; 
    -moz-background-size: cover; 
    -o-background-size: cover; 
    background-size: cover; 
    transition: opacity 0.5s; 
} 

.bg2 { 
    opacity: 0; 
} 

#btn2:hover ~ .bg2 { 
    opacity: 1; 
} 

我還添加了第二個按鈕的不透明度轉換，因爲我覺得它不那麼震撼。

https://codepen.io/jaylandro/pen/qPypmb