Href 僅在單擊 div 文本而不是整個 div 時有效
[英]Href only works when clicking on div text and not whole div
問題描述
嘿伙計們，如果我點擊它的文本，我只能點擊我的 div，我希望整個 div 都是可點擊的，謝謝。 我附上了代碼片段，我讀到問題出在我的 div 容器中，它是 class 都在 css 中，但我無法找出問題的確切位置。 任何幫助將不勝感激，非常感謝！
.all { display: flex; perspective: 10px; transform: perspective(300px) rotateX(20deg); will-change: perspective; perspective-origin: center center; transition: all 1.3s ease-out; justify-content: center; transform-style: preserve-3d; }.all:hover { perspective: 1000px; transition: all 1.3s ease-in; transform: perspective(10000px) rotateX(0deg); }.all:hover.text { opacity: 1; }.all:hover>div { opacity: 1; transition-delay: 0s; }.all:hover.explainer { opacity: 0; }.left, .center { width: 200px; height: 150px; transform-style: preserve-3d; border-radius: 10px; border: 1px solid #fff; box-shadow: 0 0 20px 5px rgba(100, 100, 255, .4); opacity: 0; transition: all 0.3s ease; transition-delay: 1s; position: relative; background-position: center center; background-size: contain; background-repeat: no-repeat; background-color: #58d; cursor: pointer; background-blend-mode: color-burn; }.left:hover, .center:hover, .right:hover, .lefter:hover, .righter:hover { box-shadow: 0 0 30px 10px rgba(100, 100, 255, .6); background-color: #ccf; }.text { transform: translateY(30px); opacity: 0; transition: all 0.3s ease; bottom: 0; left: 5px; position: absolute; will-change: transform; color: #fff; text-shadow: 0 0 5px rgba(100, 100, 255, .6); }.left { transform: translateX(-30px) translateZ(-25px) rotateY(-5deg); background-image: url(https://cdn3.iconfinder.com/data/icons/other-icons/48/creative_draw-512.png); }.center { opacity: 1; background-image: url(https://cdn3.iconfinder.com/data/icons/other-icons/48/app_window-512.png); }.explainer { font-weight: 300; font-size: 2rem; color: #fff; transition: all 0.6s ease; width: 100%; height: 100%; background-color: #303050; background-image: radial-gradient(circle at center top, #cce, #33a); border-radius: 10px; text-shadow: 0 0 10px rgba(255, 255, 255, .8); display: flex; justify-content: center; align-items: center; }
<body> <div class="all"> <div class="left"> <a href="https://www.google.com"> <div class="text">Profile</div> </a> </div> <div class="center"> </div> </div> </body>
1 個解決方案
解決方案1
0 已采納 2021-05-14 23:27:03
您可以添加一個小腳本來偵聽.all元素的點擊。
.all { cursor:pointer; display: flex; perspective: 10px; transform: perspective(300px) rotateX(20deg); will-change: perspective; perspective-origin: center center; transition: all 1.3s ease-out; justify-content: center; transform-style: preserve-3d; }.all:hover { perspective: 1000px; transition: all 1.3s ease-in; transform: perspective(10000px) rotateX(0deg); }.all:hover.text { opacity: 1; }.all:hover>div { opacity: 1; transition-delay: 0s; }.all:hover.explainer { opacity: 0; }.left, .center { width: 200px; height: 150px; transform-style: preserve-3d; border-radius: 10px; border: 1px solid #fff; box-shadow: 0 0 20px 5px rgba(100, 100, 255, .4); opacity: 0; transition: all 0.3s ease; transition-delay: 1s; position: relative; background-position: center center; background-size: contain; background-repeat: no-repeat; background-color: #58d; cursor: pointer; background-blend-mode: color-burn; }.left:hover, .center:hover, .right:hover, .lefter:hover, .righter:hover { box-shadow: 0 0 30px 10px rgba(100, 100, 255, .6); background-color: #ccf; }.text { transform: translateY(30px); opacity: 0; transition: all 0.3s ease; bottom: 0; left: 5px; position: absolute; will-change: transform; color: #fff; text-shadow: 0 0 5px rgba(100, 100, 255, .6); }.left { transform: translateX(-30px) translateZ(-25px) rotateY(-5deg); background-image: url(https://cdn3.iconfinder.com/data/icons/other-icons/48/creative_draw-512.png); }.center { opacity: 1; background-image: url(https://cdn3.iconfinder.com/data/icons/other-icons/48/app_window-512.png); }.explainer { font-weight: 300; font-size: 2rem; color: #fff; transition: all 0.6s ease; width: 100%; height: 100%; background-color: #303050; background-image: radial-gradient(circle at center top, #cce, #33a); border-radius: 10px; text-shadow: 0 0 10px rgba(255, 255, 255, .8); display: flex; justify-content: center; align-items: center; }
<body> <div class="all"> <div class="left"> <a href="https://www.google.com"> <div class="text">Profile</div> </a> </div> <div class="center"> </div> </div> <script> var all = document.querySelector('.all'); all.addEventListener('click', function(){ window.location = 'https://www.google.com'; }); </script> </body>
單擊查詢中的鏈接時，僅對div而不是整個頁面進行動畫處理
[英]animate only div instead of whole page when clicking on link in query
動態地將圖像和文本結合起來，並使整個div充當超鏈接
[英]combine image and text on the fly and make whole div works as an hypelink
聲明:本站的技術帖子網頁，遵循CC BY-SA 4.0協議，如果您需要轉載，請注明本站網址或者原文地址。任何問題請咨詢:yoyou2525@163.com.