懸停按鈕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 ， 下一個與.outer-container 直接同級將獲得background-image 。

然而，根據你的代碼， .outer-container是隆重盛大隆重盛大隆重盛大隆重的祖父母#btn 。 因此它將不起作用。

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

因此，我建議您使用JavaScript來實現。

工作實例

Answer 2

CSS僅允許后代和兄弟選擇器，它不支持將樣式應用於父項。 https://developer.mozilla.org/zh-CN/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