CSS-Hover-Stil für Element innerhalb von div mit transform-style:preserve-3d funktioniert in Safari nicht-Fragen und Antworten zum chinesischen PHP-Netzwerk
简体中文(ZH-CN) English(EN) 繁体中文(ZH-TW) 日本語(JA) 한국어(KO) Melayu(MS) Français(FR) Deutsch(DE)
CSS-Hover-Stil für Element innerhalb von div mit transform-style:preserve-3d funktioniert in Safari nicht
P粉346326040
P粉346326040 2023-08-30 18:33:26
0
1
375

Ich habe einen Parallax-Scrolling-Header mit einigen sozialen Symbolen darin mit Hover-Stilen implementiert. Hover-Stile funktionieren derzeit nicht in Safari. Wenn ich transform-style:preserve-3d aus dem Container entferne, funktioniert der Hover-Stil (unterbricht aber die Parallaxe). Es funktioniert gut in Chrome. 

    

 
 
 
 
 
 
Reisen &
Landschaft
Fotografie
 
   
 
 Ein riesiger Salzsee, der sich bei Sonnenuntergang wie ein Spiegel in der Türkei spiegelt

Das Unsplash-Symbol unter dem Titel sollte einen Hover-Stil haben (orange und Cursor).

P粉346326040
P粉346326040

Antworte allen (1)
P粉322918729
P粉3229187292023-08-31 14:06:39 1 Etage

因为当您使用“transform-style:preserve-3d”时，会使元素 z-index -1，那么您将无法选择项目，也无法将鼠标悬停在 Safari 上。

Safari SVG 渲染机制的工作方式非常不同，因此应避免复杂的 HTML-CSS 结构。

事实上，HTML结构并没有建立得很好，如果先建立一个健康的基础，问题就会少得多，工作量也会少得多。

我认为 HTML-css 看起来不太健康。

我制作了一个更简单且必须具备的结构的示例。

但我猜您希望图像在向下滚动时移动。如果你想要这个，可以添加JS。如果需要，您可以指定它。

https://codepen.io/sawacrow/pen/jOeeEXM

   

 
 
 
 
 
Travel &
Landscape
Photography
Wie+0
Antwort hinzufügen
    Beliebte Themen
    Mehr>
    Populäre Artikel
    Beliebte Tutorials
    Mehr>
    Verwandte Tutorials
    Beliebte Empfehlungen
    Aktuelle Kurse
    Neueste Downloads
    Mehr>
    Web-Effekte
    Quellcode der Website
    Website-Materialien
    Frontend-Vorlage
    Über uns Haftungsausschluss Sitemap
    Chinesische PHP-Website：Online-PHP-Schulung für das Gemeinwohl，Helfen Sie PHP-Lernenden, sich schnell weiterzuentwickeln！