简体中文(ZH-CN) English(EN) 繁体中文(ZH-TW) 日本語(JA) 한국어(KO) Melayu(MS) Français(FR) Deutsch(DE)
Safari では、transform-style:preserve-3d を使用した div 内の要素の CSS ホバー スタイルが機能しない
P粉346326040
P粉346326040 2023-08-30 18:33:26
0
1
463
<p>ホバー スタイルを使用して、内部にいくつかのソーシャル アイコンを備えた視差スクロール ヘッダーを実装しました。現在、ホバー スタイルは Safari では機能しません。コンテナ上の <code>transform-style:preserve-3d</code> を削除すると、ホバー スタイルは機能します (ただし、視差は壊れます)。 Chromeでは問題なく動作します。 </p> <p> <pre class="brush:html;toolbar:false;"><!doctype html> <html class="h-full"> <頭> <スクリプト src="https://cdn.tailwindcss.com/3.3.1"></script> </head> <div class="h-screen"> <div class="flex h-full flex-col overflow-hidden overflow-y-auto bg-stone-900"> <div class="scrollbar-thin スクロールバー-thumb-orange-400 スクロールバー-トラック-なし スクロールバー-thumb-rounded-full w-full flex-1 overflow-x-hidden overflow-y-hidden overflow-y-scroll スクロール-smooth bg-stone-900" style="perspective: 10px"> <div class="relative flex h-full items-center justify-center" style="transform-style:preserve-3d"> <div class="container m-1 lg:w-3/4" style="transform: translationZ(-5px)scale(1.5)"> <h2 class="font-bungee-hairline inline bg-stone-900 box-decoration-clone p-4 text-3xl font-bold leading-normal text-white hover:bg-red-800 sm:text-4xl md :text-6xl md:leading-tight">旅行 &<br />風景<br />写真</h2> <div class="mt-4 flex w-min bg-stone-900 px-6 py-4"> <a :href="links.unsplash" aria-label="Unsplash" target="_blank" ><svg class="mr-4 h-6 w-6 塗りつぶし白トランジション hover:cursor-pointer hover:fill-orange-400" xmlns="http://www.w3.org/2000/svg " viewBox="0 0 448 512"> <パス d="M448,230.17V480H0V230.17H141.13V355.09H306.87V230.17ZM306.87,32H141.13V156.91H306.87Z" /></svg ></a> </div> </div> <img class="absolute z-[-1] h-full w-full object-cover" src="https://images.unsplash.com/photo-1661173357770-619fcd1388af?ixlib=rb-4.0.3& ixid=MnwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8&auto=format&fit=crop&w=2340&q=80" alt="トルコの夕暮れ時に鏡のように反射する巨大な塩湖" style="transform: translationZ(-20px)scale(3) " /> </div> </div> </div> </div></pre> </p> <p>タイトルの下のスプラッシュ解除アイコンには、ホバー スタイル (オレンジ色とカーソル) が必要です。 </p>
P粉346326040
P粉346326040

全員に返信(1)
P粉322918729
P粉3229187292023-08-31 14:06:39 1棟

「transform-style:preserve-3d」を使用すると、要素の z-index -1 が作成され、項目を選択できなくなり、Safari でマウスをホバーできなくなります。 。

Safari SVG レンダリング メカニズムはまったく異なる動作をするため、複雑な HTML-CSS 構造は避けるべきです。

実際には、HTML 構造は十分に確立されていないため、最初に健全な基盤が確立されていれば、問題も作業もはるかに少なくなります。

HTML-CSS は不健全に見えると思います。

よりシンプルで必須の構造の例を作成しました。

しかし、下にスクロールすると画像が移動するようにしたいと思います。これが必要な場合は、JS を追加できます。必要に応じて指定できます。

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

リーリー
いいねを押す +0
返信を追加
人気のトピック
詳細>
人気の記事
人気のチュートリアル
詳細>
関連するチュートリアル
人気のおすすめ
最新のコース
最新のダウンロード
詳細>
ウェブエフェクト
公式サイト
サイト素材
フロントエンドテンプレート
私たちについて 免責事項 Sitemap
PHP中国語ウェブサイト：福祉オンライン PHP トレーニング，PHP 学習者の迅速な成長を支援します！