為什么我的圖像疊加在 iPhone 和 iPad 上不起作用？

Question

圖像 hover 覆蓋在我測試過的所有其他平台（桌面、android 等）上都有效，但它似乎不適用於 iPhone。 誰能指出我正確的方向，好嗎？ 我不確定這是否與z-index或是否需要web-kits有關？

當您 hover 或單擊.service時，它應該顯示覆蓋文本。 請看下面的代碼：

 .service { position: relative; width: 80%; height: 200px; margin: 60px 10%; box-shadow: rgba(0, 0, 0, 0.3) 0px 19px 38px, rgba(0, 0, 0, 0.22) 0px 15px 12px; transition: all 0.3s; }.main-img-title { position: absolute; top: 0; left: 0; width: 100%; height: 100%; display: flex; justify-content: center; align-items: center; font-size: 2.5em; font-weight: 700; color: #f8f9fa; opacity: 1; transition: 0.5s; }.img-title { background-color: rgba(0, 0, 0, 0.7); padding: 2px 10px; font-size: 1.1em; }.img-overlay { position: absolute; top: 0; left: 0; width: 100%; height: 100%; padding: 0 1%; background: rgba(0, 0, 0, 0.7); color: #f8f9fa; display: flex; flex-direction: wrap; justify-content: center; align-items: flex-end; text-align: center; opacity: 0; }.service:hover.main-img-title.img-title { animation-name: title-slide-up; animation-duration: 0.3s; animation-fill-mode: forwards; z-index: 50; background-color: rgba(0, 0, 0, 0); }.service:hover.img-overlay { opacity: 1; } #service-event:hover.main-img-title.img-title { animation-name: title-slide-up-low; animation-duration: 0.3s; animation-fill-mode: forwards; }.overlay-img-description { font-size: 18px; height: 70%; display: flex; justify-content: center; align-items: center; margin: 0; padding: 0 1%; width: 100%; max-height: 200px; }.overlay-img-description ul { padding: 0; }.overlay-img-description li { display: inline-block; font-size: 20px; }.overlay-img-description li+li::before { content: ""; display: inline-block; vertical-align: middle; margin: 0 13px; width: 10px; height: 10px; border-radius: 50%; background-color: currentColor; }.overlay-img-description p { margin: 10px 0 0 0; font-size: 0.9em; } @keyframes title-slide-up-low { from { transform: translateY(0) } to { transform: translateY(-45px) } }

 <div id="service-event" class="service"> <img class="bg-img" src="Images/Steel.JPG" alt="Steel" id="steel"> <div class="main-img-title"> <div class="img-title" id="steel-title">STEEL</div> </div> <div class="img-overlay"> <p class="overlay-img-description" id="steel-desc">Our steel crews are experienced with the construction of system scaffolding, black steel tower and truss structures. We specialise in supplying steel climbing teams with the support of steelhand ground labourers as well as plant operators who are familiar with the requirements of truss and steel assembly.</p> </div> </div>

Answer 1

為 img-title 和 img-overlay 添加 z-index，為 img-overlay 定義更高的值，這將解決您的問題。

Answer 2

移動設備不支持偽類:hover 。 請參閱此問題以替代：hover

如果您使用：active 選擇器與：hover 結合使用，只要在：hover 選擇器之后調用：active 選擇器，您就可以根據 w3schools 實現此目的。

 .info-slide:hover, .info-slide:active{ height:300px; }

編輯：

因為:active在 safari 中不起作用，所以另一種方法是將onclick="function()"添加到最上面的元素。 function()應該在網頁上創建所需的更改。 此解決方案的缺點是移動用戶必須再次單擊元素才能關閉它，而不是自動關閉。