导航栏的标志在一个页面上不响应，因为背景中有动画播放。

huangapple
go评论88阅读模式
英文:

Navbar logo is unresponsive on one page where there is an animation playing in the background

问题

我在导航栏中有一个可点击的标志。它在除了我的JavaScript测验的最后一页之外的每个页面上都起作用，在最后一页有一个背景动画正在播放。我已经调整了动画和标志的z索引，但没有变化。我不知道还可能是什么。我确信这是一些我没有注意到的明显的东西？

  1. <html lang="en">
  2. <head>
  3.     <meta charset="UTF-8">
  4.     <meta http-equiv="X-UA-Compatible" content="IE=edge">
  5.     <meta name="viewport" content="width=device-width, initial-scale=1.0">
  6.     <title>SPLANETS</title>
  7.     <meta content="" name="description">
  8.     <meta content="" name="keywords">
  9.     <!-- Favicons -->
  10.     <link href="assets/img/splanets.ico" rel="icon">
  11.     <!-- Main Bootstrap Css-->
  12.     <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0-alpha1/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-GLhlTQ8iRABdZLl6O3oVMWSktQOp6b7In1Zl3/Jr59b6EGGoI1aFkw7cmDA6j6gD" crossorigin="anonymous">
  13.     <!-- Main CSS File -->
  14.     <link href="assets/css/style.css" rel="stylesheet">
  15.     <!--Icons-->
  16.     <script src="https://kit.fontawesome.com/128d236a07.js" crossorigin="anonymous"></script>
  17. </head>
  18. <body id="">
  19.   <!-- === Header === -->
  20.   <header>
  21.     <nav class="navbar">
  22.       <div class="container-fluid">
  23.         <a class="navbar-brand mx-auto" href="index.html"><img src="assets/img/splanetslogo1.png" alt="Splanets Logo" class="img-fluid logo rocket-logo"></a>
  24.       </div>
  25.     </nav>
  26.   </header>
  27.   <!--End of Header-->
  28.     <div class="rocket-overlay"></div>
  29.     <video class="fullscreen-video" id="myVideo" autoplay="autoplay" muted >
  30.         <source src="assets/img/rocketlaunch.mp4">
  31.         Your browser does not support the video tag.
  32.     </video>
  33.     <section>
  34.         <div class="card retrycard" style="width: 18rem;">
  35.           <div class="card-body">
  36.             <h5 class="card-title">Woohooo! Blast Off!!</h5>
  37.             <h6 class="card-subtitle mb-2 text-muted"></h6>
  38.             <p class="card-text">10/10! <br> Enter your name below to claim your spot on our leaderboard;
  39.             </p>
  40.             <a href="index.html" class="btn rewatch-btn" role="button"><i class="fa-solid fa-play"></i> Watch the video again</a>
  41.             <br>
  42.             <a href="game.html" class="btn replay-btn" role="button"><i class="fa-solid fa-rocket"></i> Restart Quiz</a>
  43.           </div>
  44.         </div>
  45.       </section>
  46. <script src="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0-alpha1/dist/js/bootstrap.bundle.min.js" integrity="sha384-w76AqPfDkMBDXo30jS1Sgez6pr3x5MlQ1ZAGC+nuZB+EYdgRZgiwxhTBTkF7CXvN" crossorigin="anonymous"></script>
  47. <script src="/assets/js/script.js"></script>
  48. </body>
  49. </html>
  1. Winner Rocket Luanch
  2. --------------------------------*/
  3. .fullscreen-video {
  4.     position: fixed;
  5.     overflow: hidden;
  6.     top: 50%;
  7.     left: 50%;
  8.     min-width: 100%;
  9.     min-height: 100%;
  10.     width: auto;
  11.     height: auto;
  12.     transform: translateX(-50%) translateY(-50%);
  13.     z-index: -3;
  14. }
  16. .rocket-overlay {
  17.     position: fixed;
  18.     top: 0;
  19.     right: 0;
  20.     left: 0;
  21.     bottom: 0;
  22. }
  24. .logo .rocket-logo {
  25.     transform: translate(-40px);
  26.     max-height: 130px;
  27.     z-index: -4;
  28. }
英文:

I have a clickable logo within the navigation bar. It functions on every page apart from the final page of my javascript quiz where there is an animation playing in the background. I have changed the z index around of both the animation and the logo but no change. I have drawn a blank on what else it could be. Im sure it is something obvious that i am not seeing?

  1. &lt;html lang=&quot;en&quot;&gt;
  2. &lt;head&gt;
  3.     &lt;meta charset=&quot;UTF-8&quot;&gt;
  4.     &lt;meta http-equiv=&quot;X-UA-Compatible&quot; content=&quot;IE=edge&quot;&gt;
  5.     &lt;meta name=&quot;viewport&quot; content=&quot;width=device-width, initial-scale=1.0&quot;&gt;
  6.     &lt;title&gt;SPLANETS&lt;/title&gt;
  7.     &lt;meta content=&quot;&quot; name=&quot;description&quot;&gt;
  8.     &lt;meta content=&quot;&quot; name=&quot;keywords&quot;&gt;
  9.     &lt;!-- Favicons --&gt;
  10.     &lt;link href=&quot;assets/img/splanets.ico&quot; rel=&quot;icon&quot;&gt;
  11.     &lt;!-- Main Bootstrap Css--&gt;
  12.     &lt;link href=&quot;https://cdn.jsdelivr.net/npm/bootstrap@5.3.0-alpha1/dist/css/bootstrap.min.css&quot; rel=&quot;stylesheet&quot; integrity=&quot;sha384-GLhlTQ8iRABdZLl6O3oVMWSktQOp6b7In1Zl3/Jr59b6EGGoI1aFkw7cmDA6j6gD&quot; crossorigin=&quot;anonymous&quot;&gt;
  13.     &lt;!-- Main CSS File --&gt;
  14.     &lt;link href=&quot;assets/css/style.css&quot; rel=&quot;stylesheet&quot;&gt;
  15.     &lt;!--Icons--&gt;
  16.     &lt;script src=&quot;https://kit.fontawesome.com/128d236a07.js&quot; crossorigin=&quot;anonymous&quot;&gt;&lt;/script&gt;
  17. &lt;/head&gt;
  18. &lt;body id=&quot;&quot;&gt;
  19.   &lt;!-- === Header === --&gt;
  20.   &lt;header&gt;
  21.     &lt;nav class=&quot;navbar&quot;&gt;
  22.       &lt;div class=&quot;container-fluid&quot;&gt;
  23.         &lt;a class=&quot;navbar-brand mx-auto&quot; href=&quot;index.html&quot;&gt;&lt;img src=&quot;assets/img/splanetslogo1.png&quot; alt=&quot;Splanets Logo&quot; class=&quot;img-fluid logo rocket-logo&quot;&gt;&lt;/a&gt;
  24.       &lt;/div&gt;
  25.     &lt;/nav&gt;
  26.   &lt;/header&gt;
  27.   &lt;!--End of Header--&gt;
  28.     &lt;div class=&quot;rocket-overlay&quot;&gt;&lt;/div&gt;
  29.     &lt;video class=&quot;fullscreen-video&quot; id=&quot;myVideo&quot; autoplay=&quot;autoplay&quot; muted &gt;
  30.         &lt;source src=&quot;assets/img/rocketlaunch.mp4&quot;&gt;
  31.         Your browser does not support the video tag.
  32.     &lt;/video&gt;
  33.     &lt;section&gt;
  34.         &lt;div class=&quot;card retrycard&quot; style=&quot;width: 18rem;&quot;&gt;
  35.           &lt;div class=&quot;card-body&quot;&gt;
  36.             &lt;h5 class=&quot;card-title&quot;&gt;Woohooo! Blast Off!!&lt;/h5&gt;
  37.             &lt;h6 class=&quot;card-subtitle mb-2 text-muted&quot;&gt;&lt;/h6&gt;
  38.             &lt;p class=&quot;card-text&quot;&gt;10/10! &lt;br&gt; Enter your name below to claim your spot on our leaderboard;
  39.             &lt;/p&gt;
  40.             &lt;a href=&quot;index.html&quot; class=&quot;btn rewatch-btn&quot; role=&quot;button&quot;&gt;&lt;i class=&quot;fa-solid fa-play&quot;&gt;&lt;/i&gt; Watch the video again&lt;/a&gt;
  41.             &lt;br&gt;
  42.             &lt;a href=&quot;game.html&quot; class=&quot;btn replay-btn&quot; role=&quot;button&quot;&gt;&lt;i class=&quot;fa-solid fa-rocket&quot;&gt;&lt;/i&gt; Restart Quiz&lt;/a&gt;
  43.           &lt;/div&gt;
  44.         &lt;/div&gt;
  45.       &lt;/section&gt;
  46. &lt;script src=&quot;https://cdn.jsdelivr.net/npm/bootstrap@5.3.0-alpha1/dist/js/bootstrap.bundle.min.js&quot; integrity=&quot;sha384-w76AqPfDkMBDXo30jS1Sgez6pr3x5MlQ1ZAGC+nuZB+EYdgRZgiwxhTBTkF7CXvN&quot; crossorigin=&quot;anonymous&quot;&gt;&lt;/script&gt;
  47. &lt;script src=&quot;/assets/js/script.js&quot;&gt;&lt;/script&gt;
  48. &lt;/body&gt;
  49. &lt;/html&gt;
  1. Winner Rocket Luanch
  2. --------------------------------*/
  3. .fullscreen-video {
  4.     position: fixed;
  5.     overflow: hidden;
  6.     top: 50%;
  7.     left: 50%;
  8.     min-width: 100%;
  9.     min-height: 100%;
  10.     width: auto;
  11.     height: auto;
  12.     transform: translateX(-50%) translateY(-50%);
  13.     z-index: -3;
  14. }
  16. .rocket-overlay {
  17.     position: fixed;
  18.     top: 0;
  19.     right: 0;
  20.     left: 0;
  21.     bottom: 0;
  22. }
  24. .logo .rocket-logo {
  25.     transform: translate(-40px);
  26.     max-height: 130px;
  27.     z-index: -4;
  28. }

答案1

得分: 0

你应该为标志设置一个更高的 z-index 值，然后是视频和叠加层。像这样：

  1. .fullscreen-video {
  2.     z-index: -1;
  3. }
  5. .rocket-overlay {
  6.     z-index: -2;
  7. }
  9. .logo .rocket-logo {
  10.     z-index: 1;
  11. }
英文:

You should set a higher z-index for the logo then the video and overlay. Like this :

  1. .fullscreen-video {
  2.     z-index: -1;
  3. }
  5. .rocket-overlay {
  6.     z-index: -2;
  7. }
  9. .logo .rocket-logo {
  10.     z-index: 1;
  11. }

huangapple
  • 本文由 发表于 2023年2月8日 23:55:27
  • 转载请务必保留本文链接：https://go.coder-hub.com/75388396.html
  • bootstrap-5
  • css
  • html
匿名

发表评论

匿名网友

:?: :razz: :sad: :evil: :!: :smile: :oops: :grin: :eek: :shock: :???: :cool: :lol: :mad: :twisted: :roll: :wink: :idea: :arrow: :neutral: :cry: :mrgreen:

确定