简体中文(ZH-CN) English(EN) 繁体中文(ZH-TW) 日本語(JA) 한국어(KO) Melayu(MS) Français(FR) Deutsch(DE)
CSS 悬停样式位于 div 内的元素上，且带有 transform-style:preserve-3d 在 Safari 中不起作用
P粉346326040
P粉346326040 2023-08-30 18:33:26
0
1
465
<p>我实现了一个视差滚动标题，它里面有一些带有悬停样式的社交图标。悬停样式目前在 Safari 中不起作用。当我删除容器上的 <code>transform-style:preserve-3d</code> 时，悬停样式可以工作（但会破坏视差）。它在 Chrome 中运行良好。</p> <p> <pre class="brush:html;toolbar:false;"><!doctype html> <html class="h-full"> <head> <script 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 scrollbar-thumb-orange-400 scrollbar-track-none scrollbar-thumb-rounded-full w-full flex-1 overflow-x-hidden overflow-y-hidden overflow-y-scroll 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: translateZ(-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">Travel &<br />Landscape<br />Photography</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 fill-white transition hover:cursor-pointer hover:fill-orange-400" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 448 512"> <path 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="A Ginormous salt lake reflecting like a mirror in Turkey at sunset" style="transform: translateZ(-20px) scale(3)" /> </div> </div> </div> </div></pre> </p> <p>标题下方的 unsplash 图标应该有一些悬停样式（橙色和光标）。</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/sawacrow/pen/jOeeEXM

<!doctype html>
 <html class="h-full">
 <head><script src="https://cdn.tailwindcss.com/3.3.1"></script>
 </head><div class="h-screen bg-parallaxer">
 <div class="flex h-full flex-col overflow-hidden overflow-y-auto bg-stone-900-disable">
 <div class="  w-full flex-1  bg-stone-900-disable" style="perspective: 10px">
 <div class="relative flex h-full items-center justify-center" >
 <div class="container m-1 lg:w-3/4" style="">
 <h2 class="font-bungee-hairline inline bg-stone-900-disable 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">Travel &<br />Landscape<br />Photography</h2>
 <div class="mt-4 flex w-min bg-stone-900-disable px-6 py-4">
 <a :href="links.unsplash" aria-label="Unsplash" target="_blank">
 <svg class="mr-4 h-6 w-6 fill-white transition hover:cursor-pointer hover:fill-orange-400" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 448 512"><path d="M448,230.17V480H0V230.17H141.13V355.09H306.87V230.17ZM306.87,32H141.13V156.91H306.87Z" /></svg></a></div></div>
 </div>
 </div>
 </div>
 </div>
 <style>.bg-parallaxer {/* The image used */background-image: url("https://images.unsplash.com/photo-1661173357770-619fcd1388af?ixlib=rb-4.0.3&ixid=MnwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8&auto=format&fit=crop&w=2340&q=80");background-attachment: fixed;background-position: center;background-repeat: no-repeat;background-size: cover;min-height: 2000px;}</style>
点赞 +0
添加回复
热门专题
更多>
热门文章
热门教程
更多>
相关教程
热门推荐
最新课程
最新下载
更多>
网站特效
网站源码
网站素材
前端模板
关于我们 免责声明 Sitemap
PHP中文网：公益在线PHP培训，帮助PHP学习者快速成长！