CSS，如何在懸停在圖像上時用另一張圖像覆蓋圖像？

Question

我有兩個重疊的圖像。 當我將鼠標懸停在一個上時，我希望它覆蓋另一個（使其成為第一個計划）。 我怎么做？

Answer 1

您可以將兩個圖像包裝在一個容器元素中，然后使用懸停偽類更改子圖像的顯示或不透明度。

 <!--HTML-->
  <div id="container">
       <img id="imgOnTop"/>
       <img id="imgOnBottom"/>
  </div>

 /* CSS */
 img#imgOnTop {
    opacity: 1;
 }
 img#imgOnBottom {
     opacity:0;
 }
 div#container:hover img#imgOnTop {
     opacity:0;
 }
 div#container:hover img#imgOnBottom {
     opacity:1;
 }

或者，如果您不想更改 HTML 標記並且 img 元素已經在現有 HTML 中彼此相鄰，您可以使用 CSS 相鄰子組合器來做同樣的事情。

img#imgOnTop {
   opacity: 1;
}
img#imgOnBottom {
   opacity:0;
}
img#imgOnTop:hover {
    opacity:0;
}
img#imgOnTop:hover + img#imgOnBottom {
    opacity:1;
}