web-frontend 相关问题

JS/未检测到卡片重叠状态的问题

<pre><code>&lt;html&gt; &lt;head&gt; &lt;script src=&#34;https://ajax.googleapis.com/ajax/libs/jquery/3.6.4/jquery.min.js&#34;&gt;&lt;/script&gt; &lt;script src=&#34;https://cdnjs.cloudflare.com/ajax/libs/p5.js/1.4.0/p5.js&#34;&gt;&lt;/script&gt; &lt;link rel=&#34;stylesheet&#34; href=&#34;https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.4.0/css/all.min.css&#34;&gt; &lt;title&gt;Game Cards App&lt;/title&gt; &lt;link rel=&#34;icon&#34; type=&#34;image/png&#34; href=&#34;https://cdn1.iconfinder.com/data/icons/entertainment-events-hobbies/24/card-game-cards-hold-512.png&#34;&gt; &lt;style&gt; .card-partially-visible { pointer-events: none; } #main-content { display: none; } * { box-sizing: border-box; } body { min-height: 100vh; display: flex; align-items: center; justify-content: center; flex-flow: column wrap; background: radial-gradient(circle, rgba(7, 50, 22, 255) 0%, rgba(0, 0, 0, 255) 100%); animation: shine 4s linear infinite; color: white; font-family: &#34;Lato&#34;; -webkit-font-smoothing: antialiased; text-rendering: optimizeLegibility; } ul { margin: 0; padding: 0; list-style-type: none; max-width: 800px; width: 100%; margin: 0 auto; padding: 15px; text-align: center; overflow-x: hidden; } .card { float: left; position: relative; width: calc(33.33% - 30px + 9.999px); height: 340px; margin: 0 30px 30px 0; perspective: 1000; } .card:first-child .card__front { background:#5271C2; } .card__front img { width: 100%; height: 100%; object-fit: cover; } .card:first-child .card__num { text-shadow: 1px 1px rgba(52, 78, 147, 0.8) } .card:nth-child(2) .card__front { background:#35a541; } .card:nth-child(2) .card__num { text-shadow: 1px 1px rgba(34, 107, 42, 0.8); } .card:nth-child(3) { margin-right: 0; } .card:nth-child(3) .card__front { background: #bdb235; } .card:nth-child(3) .card__num { text-shadow: 1px 1px rgba(129, 122, 36, 0.8); } .card:nth-child(4) .card__front { background: #db6623; } .card:nth-child(4) .card__num { text-shadow: 1px 1px rgba(153, 71, 24, 0.8); } .card:nth-child(5) .card__front { background: #3e5eb3; } .card:nth-child(5) .card__num { text-shadow: 1px 1px rgba(42, 64, 122, 0.8); } .card:nth-child(6) .card__front { background: #aa9e5c; } .card:nth-child(6) .card__num { text-shadow: 1px 1px rgba(122, 113, 64, 0.8); } .card:last-child { margin-right: 0; } .card__flipper { cursor: pointer; transform-style: preserve-3d; transition: all 0.6s cubic-bezier(0.23, 1, 0.32, 1); border: 3.5px solid rgba(255, 215, 0, 0.6); background-image: linear-gradient(45deg, rgba(255, 215, 0, 0.5), transparent, rgba(255, 215, 0, 0.5)); } .card__front, .card__back { position: absolute; backface-visibility: hidden; top: 0; left: 0; width: 100%; height: 340px; } .card__front { transform: rotateY(0); z-index: 2; overflow: hidden; } .card__back { transform: rotateY(180deg) scale(1.1); background: linear-gradient(45deg, #483D8B, #301934, #483D8B, #301934); display: flex; flex-flow: column wrap; align-items: center; justify-content: center; box-shadow: 0 4px 20px rgba(0, 0, 0, 0.3); } .card__back span { font-weight: bold; /* Metni kalın yap */ color: white; /* Beyaz renk */ font-size: 16px; position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%); } .card__name { font-size: 32px; line-height: 0.9; font-weight: 700; } .card__name span { font-size: 14px; } .card__num { font-size: 100px; margin: 0 8px 0 0; font-weight: 700; } @media (max-width: 700px) { .card__num { font-size: 70px; } } @media (max-width: 700px) { .card { width: 100%; height: 290px; margin-right: 0; float: none; } .card .card__front, .card .card__back { height: 290px; overflow: hidden; } } /* Demo */ main { text-align: center; } main h1, main p { margin: 0 0 12px 0; } main h1 { margin-top: 12px; font-weight: 300; } .fa-github { color: white; font-size: 50px; margin-top: 8px; } .tm-container { display: flex; justify-content: center; align-items: center; } .tm-letter { display:inline-block; font-size:30px; margin: 0 5px; margin-top: 10px; opacity: 0; transform: translateY(0); animation: letter-animation 6s ease-in-out infinite; } @keyframes letter-animation { 0%, 100% { opacity: 1; transform: translateY(0); } 10%, 40%, 60%, 90% { opacity: 1; transform: translateY(-10px); } 20%, 80% { opacity: 1; transform: translateY(0); } } #m-letter { animation-delay: 1.5s; } a { position: relative; display: inline-block; padding: 0px; } a::before { content: &#39;&#39;; position: absolute; top: 50%; /* Orta konumu */ left: 50%; /* Orta konumu */ transform: translate(-50%, -50%); width: 50px; height: 45px; border-radius: 50%; /* Eğer bir daire şeklinde efekt isteniyorsa */ box-shadow: 0 0 8px 4px rgba(110, 110, 110, 0.8); filter: blur(4px) brightness(1.5); / opacity: 0; transition: opacity 0.3s ease, transform 0.3s ease; z-index: -1; } a:hover::before { opacity: 1; } body.hoverEffect { background: radial-gradient(circle at center, #000000, #000033, #000066, #1a1a1a); } #gameCard { width: 300px; height: 450px; margin: 50px auto; padding: 20px; border-radius: 15px; box-shadow: 0 0 50px 10px #FFD700, 0 0 100px 20px #0000FF, 0 0 150px 30px #000033; background: rgba(0,0,0,0.7); color:#FFD700; text-align: center; border: 3px solid #FFD700; } #gameCardLink span { font-size: 18px; margin-right: 5px; font-weight: bold; } #gameCardLink span:last-child { font-size: 0.79em; vertical-align: super; opacity: 0.9; font-weight: bold; text-shadow: 2px 2px 2px rgba(0, 0, 0, 0.5); } #loading-animation { position: fixed; top: 0; left: 0; width: 100%; height: 100%; background-image:url(&#39;data:image/jpeg;base64,/); background-repeat: no-repeat; background-size: cover ; display: flex; justify-content: center; align-items: center; z-index: 9999; } .loader { border-top: 9px solid #00a2ed; border-radius: 80%; width: 12vw; height: 12vw; animation: spin 2s linear infinite; position: absolute; left: 44%; top: 46%; / transform: translate(-50%, -50%) rotate(0deg); /* Yuvarlak halkanın tam ortasında olması için bu dönüşümü kullanın. */ } @keyframes spin { 0% { transform: rotate(0deg); } 100% { transform: rotate(360deg); } } &lt;/style&gt; &lt;/head&gt; &lt;body&gt; &lt;div id=&#34;loading-animation&#34;&gt; &lt;div class=&#34;loader&#34;&gt;&lt;/div&gt; &lt;/div&gt; &lt;div id=&#34;main-content&#34;&gt; &lt;div class=&#34;tm-container&#34;&gt; &lt;div class=&#34;tm-letter&#34; id=&#34;t-letter&#34;&gt;T&lt;/div&gt; &lt;div class=&#34;tm-letter&#34; id=&#34;m-letter&#34;&gt;M&lt;/div&gt; &lt;/div&gt; &lt;audio id=&#34;flipSound&#34; preload=&#34;auto&#34;&gt; &lt;source src=&#34;https://cdn.freesound.org/previews/321/321114_2776777-lq.ogg&#34; type=&#34;audio/wav&#34;&gt; &lt;/audio&gt; &lt;main&gt; &lt;div id=&#34;gameCardLink&#34;&gt; &lt;span&gt;G&lt;/span&gt; &lt;span&gt;a&lt;/span&gt; &lt;span&gt;m&lt;/span&gt; &lt;span&gt;e&lt;/span&gt; &lt;span&gt; &lt;/span&gt; &lt;!-- Boşluk eklemek için span ekledik --&gt; &lt;span&gt; &lt;/span&gt; &lt;span&gt;C&lt;/span&gt; &lt;span&gt; &lt;/span&gt; &lt;span&gt;a&lt;/span&gt; &lt;span&gt; &lt;/span&gt; &lt;span&gt;r&lt;/span&gt; &lt;span&gt; &lt;/span&gt; &lt;span&gt;d&lt;/span&gt; &lt;span&gt; &lt;/span&gt; &lt;span&gt;s&lt;/span&gt; &lt;span&gt;®&lt;/span&gt; &lt;/div&gt; &lt;p&gt;&lt;a href=&#34;https://github.com/murattasci06&#34;&gt;&lt;i class=&#34;fab fa-github&#34;&gt;&lt;/i&gt;&lt;/a&gt;&lt;/p&gt; &lt;/main&gt; &lt;ul&gt; &lt;li class=&#34;card&#34; &gt; &lt;div class=&#34;card__flipper&#34;&gt; &lt;div class=&#34;card__front&#34;&gt; &lt;img src=&#34;https://gecbunlari.com/wp-content/uploads/2021/12/Spiderman-No-Way-Home.jpg&#34; alt=&#34;Spiderman&#34;&gt; &lt;p class=&#34;card__name&#34;&gt;&lt;span&gt;Marvel&lt;/span&gt;&lt;br&gt;Spiderman&lt;/p&gt; &lt;p class=&#34;card__num&#34;&gt;1&lt;/p&gt; &lt;/div&gt; &lt;iframe class=&#34;frame&#34; width=&#34;225&#34; height=&#34;340&#34; src=&#34;https://www.youtube.com/embed/JfVOs4VSpmA?autoplay=1&amp;mute=1&amp;vq=hd1080&#34; title=&#34;YouTube video player&#34; frameborder=&#34;0&#34; allow=&#34;accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture; web-share&#34; allowfullscreen &gt;&lt;/iframe&gt; &lt;div class=&#34;card__back&#34;&gt; &lt;svg height=&#34;180&#34; width=&#34;180&#34;&gt; &lt;circle cx=&#34;90&#34; cy=&#34;90&#34; r=&#34;65&#34; stroke=&#34;#514d9b&#34; stroke-width=&#34;35&#34; /&gt; &lt;!-- Dış dairenin kenarı (yeşil) --&gt; &lt;circle cx=&#34;90&#34; cy=&#34;90&#34; r=&#34;83&#34; fill=&#34;none&#34; stroke=&#34;rgba(7, 50, 22, 255)&#34; stroke-width=&#34;1&#34; /&gt; &lt;/svg&gt; &lt;span&gt;1.89 Bil. $&lt;/span&gt; &lt;/div&gt; &lt;/div&gt; &lt;/li&gt; &lt;li class=&#34;card&#34;&gt; &lt;div class=&#34;card__flipper&#34;&gt; &lt;div class=&#34;card__front&#34;&gt; &lt;img src=&#34;https://i.pinimg.com/736x/1e/f1/3d/1ef13dfa4b7b8c131302e242d1ec48d7.jpg&#34; alt=&#34;Batman&#34;&gt; &lt;p class=&#34;card__name&#34;&gt;&lt;span&gt;DC&lt;/span&gt;&lt;br&gt;Batman&lt;/p&gt; &lt;p class=&#34;card__num&#34;&gt;2&lt;/p&gt; &lt;/div&gt; &lt;iframe class=&#34;frame&#34; width=&#34;225&#34; height=&#34;340&#34; src=&#34;https://www.youtube.com/embed/mqqft2x_Aa4?autoplay=1&amp;mute=1&amp;vq=hd1080&#34; title=&#34;YouTube video player&#34; frameborder=&#34;0&#34; allow=&#34;accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture; web-share&#34; allowfullscreen &gt;&lt;/iframe&gt; &lt;div class=&#34;card__back&#34;&gt; &lt;svg height=&#34;180&#34; width=&#34;180&#34;&gt; &lt;circle cx=&#34;90&#34; cy=&#34;90&#34; r=&#34;65&#34; stroke=&#34;#35a541&#34; stroke-width=&#34;35&#34;/&gt; &lt;!-- Dış dairenin kenarı (yeşil) --&gt; &lt;circle cx=&#34;90&#34; cy=&#34;90&#34; r=&#34;83&#34; fill=&#34;none&#34; stroke=&#34;rgba(7, 50, 22, 255)&#34; stroke-width=&#34;1&#34; /&gt; &lt;/svg&gt; &lt;span&gt;771 Mil. $&lt;/span&gt; &lt;/div&gt; &lt;/div&gt; &lt;/li&gt; &lt;li class=&#34;card&#34;&gt; &lt;div class=&#34;card__flipper&#34;&gt; &lt;div class=&#34;card__front&#34;&gt; &lt;img src=&#34;https://wallpapercave.com/wp/wp12279011.jpg&#34; alt=&#34;Guardians_of_the_Galaxy_Vol_3&#34;&gt; &lt;p class=&#34;card__name&#34;&gt;&lt;span&gt;Marvel&lt;/span&gt;&lt;br&gt;Guardians_of_the_Galaxy_Vol_3&lt;/p&gt; &lt;p class=&#34;card__num&#34;&gt;3&lt;/p&gt; &lt;/div&gt; &lt;iframe class=&#34;frame&#34; width=&#34;225&#34; height=&#34;340&#34; src=&#34;https://www.youtube.com/embed/u3V5KDHRQvk?autoplay=1&amp;mute=1&amp;vq=hd1080&#34; title=&#34;YouTube video player&#34; frameborder=&#34;0&#34; allow=&#34;accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture; web-share&#34; allowfullscreen &gt;&lt;/iframe&gt; &lt;div class=&#34;card__back&#34;&gt; &lt;svg height=&#34;180&#34; width=&#34;180&#34;&gt; &lt;circle cx=&#34;90&#34; cy=&#34;90&#34; r=&#34;65&#34; stroke=&#34;#bdb235&#34; stroke-width=&#34;35&#34;/&gt; &lt;!-- Dış dairenin kenarı (yeşil) --&gt; &lt;circle cx=&#34;90&#34; cy=&#34;90&#34; r=&#34;83&#34; fill=&#34;none&#34; stroke=&#34;rgba(7, 50, 22, 255)&#34; stroke-width=&#34;1&#34; /&gt; &lt;/svg&gt; &lt;span&gt;845.4 Mil. $&lt;/span&gt; &lt;/div&gt; &lt;/div&gt; &lt;/li&gt; &lt;li class=&#34;card&#34;&gt; &lt;div class=&#34;card__flipper&#34;&gt; &lt;div class=&#34;card__front&#34;&gt; &lt;img src=&#34;https://wallpaperaccess.com/full/8940499.jpg&#34; alt=&#34;Shazam&#34;&gt; &lt;p class=&#34;card__name&#34;&gt;&lt;span&gt;DC&lt;/span&gt;&lt;br&gt;Shazam2&lt;/p&gt; &lt;p class=&#34;card__num&#34;&gt;4&lt;/p&gt; &lt;/div&gt; &lt;iframe class=&#34;frame&#34; width=&#34;225&#34; height=&#34;340&#34; src=&#34;https://www.youtube.com/embed/AIc671o9yCI?autoplay=1&amp;mute=1&amp;vq=hd1080&#34; title=&#34;YouTube video player&#34; frameborder=&#34;0&#34; allow=&#34;accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture; web-share&#34; allowfullscreen &gt;&lt;/iframe&gt; &lt;div class=&#34;card__back&#34;&gt; &lt;svg height=&#34;180&#34; width=&#34;180&#34;&gt; &lt;circle cx=&#34;90&#34; cy=&#34;90&#34; r=&#34;65&#34; stroke=&#34;#db6623&#34; stroke-width=&#34;35&#34;/&gt; &lt;!-- Dış dairenin kenarı (yeşil) --&gt; &lt;circle cx=&#34;90&#34; cy=&#34;90&#34; r=&#34;83&#34; fill=&#34;none&#34; stroke=&#34;rgba(7, 50, 22, 255)&#34; stroke-width=&#34;1&#34; /&gt; &lt;/svg&gt; &lt;span&gt;462.5 Mil. $&lt;/span&gt; &lt;/div&gt; &lt;/div&gt; &lt;/li&gt; &lt;li class=&#34;card&#34;&gt; &lt;div class=&#34;card__flipper&#34;&gt; &lt;div class=&#34;card__front&#34;&gt; &lt;img src=&#34;https://images2.alphacoders.com/131/1316679.jpeg&#34; alt=&#34;Flash&#34;&gt; &lt;p class=&#34;card__name&#34;&gt;&lt;span&gt;DC&lt;/span&gt;&lt;br&gt;Flash&lt;/p&gt; &lt;p class=&#34;card__num&#34;&gt;5&lt;/p&gt; &lt;/div&gt; &lt;iframe class=&#34;frame&#34; width=&#34;225&#34; height=&#34;340&#34; src=&#34;https://www.youtube.com/embed/hebWYacbdvc?autoplay=1&amp;mute=1&amp;vq=hd1080&#34; title=&#34;YouTube video player&#34; frameborder=&#34;0&#34; allow=&#34;accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture; web-share&#34; allowfullscreen &gt;&lt;/iframe&gt; &lt;div class=&#34;card__back&#34;&gt; &lt;svg height=&#34;180&#34; width=&#34;180&#34;&gt; &lt;circle cx=&#34;90&#34; cy=&#34;90&#34; r=&#34;65&#34; stroke=&#34;#3e5eb3&#34; stroke-width=&#34;35&#34;/&gt; &lt;!-- Dış dairenin kenarı (yeşil) --&gt; &lt;circle cx=&#34;90&#34; cy=&#34;90&#34; r=&#34;83&#34; fill=&#34;none&#34; stroke=&#34;rgba(7, 50, 22, 255)&#34; stroke-width=&#34;1&#34; /&gt; &lt;/svg&gt; &lt;span&gt;560.2 Mil. $&lt;/span&gt; &lt;/div&gt; &lt;/div&gt; &lt;/li&gt; &lt;li class=&#34;card&#34;&gt; &lt;div class=&#34;card__flipper&#34;&gt; &lt;div class=&#34;card__front&#34;&gt; &lt;img src=&#34; https://images3.alphacoders.com/121/1213553.jpg&#34; alt=&#34;Dr_Strange_2&#34;&gt; &lt;p class=&#34;card__name&#34;&gt;&lt;span&gt;Marvel&lt;/span&gt;&lt;br&gt;Dr_Strange_2&lt;/p&gt; &lt;p class=&#34;card__num&#34;&gt;6&lt;/p&gt; &lt;/div&gt; &lt;iframe class=&#34;frame&#34; width=&#34;225&#34; height=&#34;340&#34; src=&#34;https://www.youtube.com/embed/aWzlQ2N6qqg?autoplay=1&amp;mute=1&amp;vq=hd1080&#34; title=&#34;YouTube video player&#34; frameborder=&#34;0&#34; allow=&#34;accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture; web-share&#34; allowfullscreen &gt;&lt;/iframe&gt; &lt;div class=&#34;card__back&#34;&gt; &lt;svg height=&#34;180&#34; width=&#34;180&#34;&gt; &lt;circle cx=&#34;90&#34; cy=&#34;90&#34; r=&#34;65&#34; stroke=&#34;#aa9e5c&#34; stroke-width=&#34;35&#34;/&gt; &lt;!-- Dış dairenin kenarı (yeşil) --&gt; &lt;circle cx=&#34;90&#34; cy=&#34;90&#34; r=&#34;83&#34; fill=&#34;none&#34; stroke=&#34;rgba(7, 50, 22, 255)&#34; stroke-width=&#34;1&#34; /&gt; &lt;/svg&gt; &lt;span&gt;955.8 Mil. $&lt;/span&gt; &lt;/div&gt; &lt;/div&gt; &lt;/li&gt; &lt;/ul&gt; &lt;/div&gt; &lt;/body&gt; &lt;script&gt; var Flipper = (function() { var card = $(&#39;.card&#39;); var flipper = card.find(&#39;.card__flipper&#39;); var win = $(window); var flip = function() { var thisCard = $(this); var thisFlipper = thisCard.find(&#39;.card__flipper&#39;); var offset = thisCard.offset(); var xc = win.width() / 2; var yc = win.height() / 2; var docScroll = $(document).scrollTop(); var cardW = thisCard.outerWidth() / 2; var cardH = thisCard.height() / 2; var transX = xc - offset.left - cardW; var transY = docScroll + yc - offset.top - cardH; // if (offset.top &gt; card.height()) transY = docScroll - offset.top + cardH; if (win.width() &lt;= 700) transY = 0; if (card.hasClass(&#39;active&#39;)) unflip(); thisCard.css({&#39;z-index&#39;: &#39;3&#39;}).addClass(&#39;active&#39;); thisFlipper.css({ &#39;transform&#39;: &#39;translate3d(&#39; + transX + &#39;px,&#39; + transY + &#39;px, 0) rotateY(180deg) scale(1)&#39;, &#39;-webkit-transform&#39;: &#39;translate3d(&#39; + transX + &#39;px,&#39; + transY + &#39;px, 0) rotateY(180deg) scale(1)&#39;, &#39;-ms-transform&#39;: &#39;translate3d(&#39; + transX + &#39;px,&#39; + transY + &#39;px, 0) rotateY(180deg) scale(1)&#39; }).addClass(&#39;active&#39;); return false; }; var unflip = function(e) { card.css({&#39;z-index&#39;: &#39;1&#39;}).removeClass(&#39;active&#39;); flipper.css({ &#39;transform&#39;: &#39;none&#39;, &#39;-webkit-transform&#39;: &#39;none&#39;, &#39;-ms-transform&#39;: &#39;none&#39; }).removeClass(&#39;active&#39;); }; var bindActions = function() { card.on(&#39;click&#39;, flip); win.on(&#39;click&#39;, unflip); } var init = function() { bindActions(); }; return { init: init }; }()); Flipper.init(); &lt;/script&gt; &lt;script&gt; &lt;!-- HOOVER FOR TRAILER --&gt; let hoverTimeout; $(&#39;.card&#39;).hover(function() { const currentCard = $(this); // Store the current card element in a variable hoverTimeout = setTimeout(() =&gt; { currentCard.find(&#39;.card__front&#39;).hide(); currentCard.find(&#39;.iframe&#39;).show(); var src = currentCard.find(&#39;.iframe&#39;).attr(&#34;src&#34;); currentCard.find(&#39;.iframe&#39;).attr(&#34;src&#34;, src); // Add fullscreen functionality currentCard.find(&#39;.iframe&#39;).on(&#39;click&#39;, function() { $(this).requestFullscreen(); }); }, 5000); // 5000 milliseconds (5 seconds) }, function() { clearTimeout(hoverTimeout); // Clear the timeout to prevent actions if the user moves away before 5 seconds $(this).find(&#39;.card__front&#39;).show(); $(this).find(&#39;.iframe&#39;).hide(); var src = $(this).find(&#39;.iframe&#39;).attr(&#34;src&#34;); if (src) { $(this).find(&#39;.iframe&#39;).attr(&#34;src&#34;, src.replace(&#39;?autoplay=1&#39;, &#39;&#39;)); } }); &lt;/script&gt; &lt;script&gt; var cardFlags = {}; $(document).ready(function() { var flipSound = document.getElementById(&#34;flipSound&#34;); // Sesin yalnızca kartın ön yüzüne tıklandığında çalmasını sağlayın. $(&#34;.card__front&#34;).click(function() { console.log(&#39;Kart önüne tıklandı&#39;, event.target); flipSound.currentTime = 0; flipSound.play(); console.log(&#39;dönüş sesi çalındı&#39;, event.target); }); $(&#34;.card&#34;).click(function() { var card = $(this); var cardId = card.find(&#34;.card__num&#34;).text(); console.log(cardId); // Check if the card is not already flipping to avoid multiple flips if (!card.hasClass(&#39;flipping&#39;)) { card.addClass(&#39;flipping&#39;); // Check if the front side is facing the viewer if (!card.hasClass(&#34;flipped&#34;)) { console.log(&#34;is card flag true or false&#34;, cardId); if (!cardFlags[cardId]) { startAnimation(div); console.log(&#34;started&#34;); cardFlags[cardId] = true; card.addClass(&#34;flipped&#34;); } // Adding canvas to back-side var div = document.querySelector(&#39;.flipped .card__flipper.active .card__back&#39;); var canvas = document.getElementsByClassName(&#39;p5Canvas&#39;)[0]; if (div &amp;&amp; canvas) { div.appendChild(canvas); canvas.style.position = &#39;absolute&#39;; } } else { console.log(&#34;stopped&#34;); card.removeClass(&#34;flipped&#34;); } setTimeout(function() { card.removeClass(&#39;flipping&#39;); }, 1000); } }); // Prevent sound on back side click $(&#34;.card__back&#34;).click(function(e) { e.stopPropagation(); }); }); &lt;/script&gt; &lt;script&gt; // Body&#39;s hoover effect document.getElementById(&#34;gameCardLink&#34;).addEventListener(&#34;mouseover&#34;, function() { document.body.classList.add(&#34;hoverEffect&#34;); }); document.getElementById(&#34;gameCardLink&#34;).addEventListener(&#34;mouseout&#34;, function() { document.body.classList.remove(&#34;hoverEffect&#34;); }); &lt;/script&gt; &lt;script&gt; // Portal effect var p5Instance; function startAnimation(div) { // adding canvas to back-side var canvas = document.getElementsByClassName(&#39;p5Canvas&#39;)[0]; if (div &amp;&amp; canvas) { div.appendChild(canvas); canvas.style.position = &#39;absolute&#39;; } const sketch = (p) =&gt; { const createParticleSystem = (location) =&gt; { const origin = location.copy(); const particles = []; const addParticle = velocity =&gt; { const rand = p.random(0, 1); if (rand &lt;= .3) { particles.push(createSparkParticle(origin, velocity.copy())); } else { particles.push(createParticle(origin, velocity.copy())); } }; const applyForce = force =&gt; { particles.forEach(particle =&gt; { particle.applyForce(force); }); }; const run = () =&gt; { particles.forEach((particle, index) =&gt; { particle.move(); particle.draw(); if (particle.isDead()) { particles.splice(index, 1); } }); }; return { origin, addParticle, run, applyForce }; }; const createSparkParticle = (locationP, velocity) =&gt; { const particle = createParticle(locationP, velocity); let fade = 255; const draw = () =&gt; { p.colorMode(p.HSB); p.stroke(16, 62, 100, fade); const arrow = velocity.copy().normalize().mult(p.random(2, 4)); const direction = p5.Vector.add(particle.location, arrow); p.line(particle.location.x, particle.location.y, direction.x, direction.y); }; const move = () =&gt; { particle.applyForce(p.createVector(p.random(-.2, .2), p.random(-0.1, -0.4))); particle.velocity.add(particle.acc); particle.location.add(particle.velocity.copy().normalize().mult(p.random(2, 4))); particle.acc.mult(0); fade -= 5; }; return { ...particle, draw, move } } const createParticle = (locationP, velocity) =&gt; { const acc = p.createVector(0, 0); const location = locationP.copy(); let fade = 255; const fadeMinus = p.randomGaussian(15, 2); let ligther = 100; let situate = 62; const draw = () =&gt; { p.colorMode(p.HSB) p.stroke(16, p.constrain(situate, 62, 92), p.constrain(ligther, 60, 100), fade); const arrow = velocity.copy().mult(2); const direction = p5.Vector.add(location, arrow); p.line(location.x, location.y, direction.x, direction.y); }; const move = () =&gt; { velocity.add(acc); location.add(velocity.copy().div(p.map(velocity.mag(), 18, 0, 5, 1))); acc.mult(0); fade -= fadeMinus; ligther -= 8; situate += 8; }; const applyForce = force =&gt; { acc.add(force); }; const isDead = () =&gt; { if (fade &lt; 0 || location.x &lt; 0 || location.x &gt; p.width || location.y &gt; p.height) { return true; } else { return false; } }; return { draw, move, applyForce, isDead, velocity, location, acc }; }; const createMover = () =&gt; { const location = p.createVector(p.width / 2, p.height / 2); const velocity = p.createVector(0, 0); const acc = p.createVector(0, 0); const mass = 10; let angle = 0; let angleVelocity = 0; let angleAcc = 0; let len = 100; const particleSystems = [ createParticleSystem(location), createParticleSystem(location), createParticleSystem(location), createParticleSystem(location), createParticleSystem(location), createParticleSystem(location), createParticleSystem(location), createParticleSystem(location), createParticleSystem(location) ]; const getGotoVector = angle =&gt; { const radius = p.map(angleVelocity, 0, 0.3, 0, 80); const goToVector = p.createVector( location.x + radius * p.cos(angle), location.y + radius * p.sin(angle) ); return goToVector; }; const draw = () =&gt; { const goToVector = getGotoVector(angle); particleSystems.forEach(particleSystem =&gt; { particleSystem.run(); }); }; const renderParticleSystem = () =&gt; { particleSystems.forEach(particleSystem =&gt; { const goToVector = getGotoVector(angle - p.random(0, p.TWO_PI)); const prepencular = p.createVector( (goToVector.y - location.y)*-1, (goToVector.x - location.x) ); prepencular.normalize(); prepencular.mult(angleVelocity * 70); particleSystem.origin.set(goToVector); particleSystem.addParticle(prepencular); const gravity = p.createVector(0, 0.3); particleSystem.applyForce(gravity); }); }; const move = () =&gt; { angleAcc = 0.005; angleVelocity = p.constrain(angleVelocity + angleAcc, 0, 0.32); angle += angleVelocity; angleAcc = 0; renderParticleSystem(); }; return { draw, move }; }; let mover; p.setup = function() { p.createCanvas(230, 320); p.clear(); mover = createMover(); } p.draw = function() { p.clear(); mover.move(); mover.draw(); } }; p5Instance = new p5(sketch); } &lt;/script&gt; &lt;script&gt; // hiding and showing loading animation function hideLoadingAnimation() { console.log(&#34;Yükleme animasyonu gizleniyor, ana içerik gösteriliyor&#34;); var loadingAnimation = document.getElementById(&#34;loading-animation&#34;); var mainContent = document.getElementById(&#34;main-content&#34;); loadingAnimation.style.display = &#34;none&#34;; mainContent.style.display = &#34;block&#34;; } window.onload = function() { console.log(&#34;Sayfa tamamen yüklendi&#34;); hideLoadingAnimation(); }; &lt;/script&gt; &lt;/html&gt; </code></pre> <p>朋友们大家好，在该问题的图片中，有一张中间颠倒的紫色卡片。上面和下面各有 2 张牌与这张牌重叠。当卡片正面和背面相互重叠时，我如何轻松确保正面半可见的卡片底部不会用胡佛播放预告片（<strong>鼠标事件在这种情况下不起作用</strong>）？用CSS？我正在尝试用非常简单的方法来解决这个问题。</p> <pre><code>card-partially-visible { pointer-events: none; } </code></pre> <p>这样的事情有意义吗？如果是这样，您应该如何确定它是否部分可见？ 有没有现成的功能可以自动检测？</p> <p><a href="https://i.stack.imgur.com/6kFhI.png" target="_blank"><img src="https://cdn.txt58.com/i/AWkuc3RhY2suaW1ndXIuY29tLzZrRmhJLnBuZw==" alt=""/></a></p> </question> <answer tick="false" vote="0"> <p>如果将 3D 过渡从 <pre><code>.card__flipper</code></pre> 移动到 <pre><code>.card</code></pre> 本身，您可以给出任何 <pre><code>.card.active</code></pre> <pre><code>::before</code></pre> 和 <pre><code>::after</code></pre> 伪元素，它们将覆盖后面的卡片。</p> <p>在下面的工作示例中，我将伪元素设置为半透明红色（即<pre><code>rgba(255, 0, 0, 0.5)</code></pre>），以便您可以看到它们，但通常您只需将伪元素设置为透明即可：<pre><code>rgba(0, 0, 0, 0)</code></pre>。</p> <hr/> <p><strong>工作示例：</strong></p> <p></p><div data-babel="false" data-lang="js" data-hide="false" data-console="true"> <div> <pre><code>var Flipper = (function() { var card = $(&#39;.card&#39;); var flipper = card.find(&#39;.card__flipper&#39;); var win = $(window); var flip = function() { var thisCard = $(this); var thisFlipper = thisCard.find(&#39;.card__flipper&#39;); var offset = thisCard.offset(); var xc = win.width() / 2; var yc = win.height() / 2; var docScroll = $(document).scrollTop(); var cardW = thisCard.outerWidth() / 2; var cardH = thisCard.height() / 2; var transX = xc - offset.left - cardW; var transY = docScroll + yc - offset.top - cardH; // if (offset.top &gt; card.height()) transY = docScroll - offset.top + cardH; if (win.width() &lt;= 700) transY = 0; if (card.hasClass(&#39;active&#39;)) unflip(); thisCard.css({&#39;z-index&#39;: &#39;3&#39;}).css({ &#39;transform&#39;: &#39;translate3d(&#39; + transX + &#39;px,&#39; + transY + &#39;px, 0) rotateY(180deg) scale(1)&#39; }).addClass(&#39;active&#39;); thisFlipper.addClass(&#39;active&#39;); return false; }; var unflip = function(e) { card.css({&#39;z-index&#39;: &#39;1&#39;}).css({ &#39;transform&#39;: &#39;none&#39; }).removeClass(&#39;active&#39;); flipper.removeClass(&#39;active&#39;); }; var bindActions = function() { card.on(&#39;click&#39;, flip); win.on(&#39;click&#39;, unflip); } var init = function() { bindActions(); }; return { init: init }; }()); Flipper.init(); &lt;!-- HOOVER FOR TRAILER --&gt; let hoverTimeout; $(&#39;.card&#39;).hover(function() { const currentCard = $(this); // Store the current card element in a variable hoverTimeout = setTimeout(() =&gt; { currentCard.find(&#39;.card__front&#39;).hide(); currentCard.find(&#39;.iframe&#39;).show(); var src = currentCard.find(&#39;.iframe&#39;).attr(&#34;src&#34;); currentCard.find(&#39;.iframe&#39;).attr(&#34;src&#34;, src); // Add fullscreen functionality currentCard.find(&#39;.iframe&#39;).on(&#39;click&#39;, function() { $(this).requestFullscreen(); }); }, 5000); // 5000 milliseconds (5 seconds) }, function() { clearTimeout(hoverTimeout); // Clear the timeout to prevent actions if the user moves away before 5 seconds $(this).find(&#39;.card__front&#39;).show(); $(this).find(&#39;.iframe&#39;).hide(); var src = $(this).find(&#39;.iframe&#39;).attr(&#34;src&#34;); if (src) { $(this).find(&#39;.iframe&#39;).attr(&#34;src&#34;, src.replace(&#39;?autoplay=1&#39;, &#39;&#39;)); } }); var cardFlags = {}; $(document).ready(function() { var flipSound = document.getElementById(&#34;flipSound&#34;); // Sesin yalnızca kartın ön yüzüne tıklandığında çalmasını sağlayın. $(&#34;.card__front&#34;).click(function() { console.log(&#39;Kart önüne tıklandı&#39;, event.target); flipSound.currentTime = 0; flipSound.play(); console.log(&#39;dönüş sesi çalındı&#39;, event.target); }); $(&#34;.card&#34;).click(function() { var card = $(this); var cardId = card.find(&#34;.card__num&#34;).text(); console.log(cardId); // Check if the card is not already flipping to avoid multiple flips if (!card.hasClass(&#39;flipping&#39;)) { card.addClass(&#39;flipping&#39;); // Check if the front side is facing the viewer if (!card.hasClass(&#34;flipped&#34;)) { console.log(&#34;is card flag true or false&#34;, cardId); if (!cardFlags[cardId]) { startAnimation(div); console.log(&#34;started&#34;); cardFlags[cardId] = true; card.addClass(&#34;flipped&#34;); } // Adding canvas to back-side var div = document.querySelector(&#39;.flipped .card__flipper.active .card__back&#39;); var canvas = document.getElementsByClassName(&#39;p5Canvas&#39;)[0]; if (div &amp;&amp; canvas) { div.appendChild(canvas); canvas.style.position = &#39;absolute&#39;; } } else { console.log(&#34;stopped&#34;); card.removeClass(&#34;flipped&#34;); } setTimeout(function() { card.removeClass(&#39;flipping&#39;); }, 1000); } }); // Prevent sound on back side click $(&#34;.card__back&#34;).click(function(e) { e.stopPropagation(); }); }); // Body&#39;s hoover effect document.getElementById(&#34;gameCardLink&#34;).addEventListener(&#34;mouseover&#34;, function() { document.body.classList.add(&#34;hoverEffect&#34;); }); document.getElementById(&#34;gameCardLink&#34;).addEventListener(&#34;mouseout&#34;, function() { document.body.classList.remove(&#34;hoverEffect&#34;); }); // Portal effect var p5Instance; function startAnimation(div) { // adding canvas to back-side var canvas = document.getElementsByClassName(&#39;p5Canvas&#39;)[0]; if (div &amp;&amp; canvas) { div.appendChild(canvas); canvas.style.position = &#39;absolute&#39;; } const sketch = (p) =&gt; { const createParticleSystem = (location) =&gt; { const origin = location.copy(); const particles = []; const addParticle = velocity =&gt; { const rand = p.random(0, 1); if (rand &lt;= .3) { particles.push(createSparkParticle(origin, velocity.copy())); } else { particles.push(createParticle(origin, velocity.copy())); } }; const applyForce = force =&gt; { particles.forEach(particle =&gt; { particle.applyForce(force); }); }; const run = () =&gt; { particles.forEach((particle, index) =&gt; { particle.move(); particle.draw(); if (particle.isDead()) { particles.splice(index, 1); } }); }; return { origin, addParticle, run, applyForce }; }; const createSparkParticle = (locationP, velocity) =&gt; { const particle = createParticle(locationP, velocity); let fade = 255; const draw = () =&gt; { p.colorMode(p.HSB); p.stroke(16, 62, 100, fade); const arrow = velocity.copy().normalize().mult(p.random(2, 4)); const direction = p5.Vector.add(particle.location, arrow); p.line(particle.location.x, particle.location.y, direction.x, direction.y); }; const move = () =&gt; { particle.applyForce(p.createVector(p.random(-.2, .2), p.random(-0.1, -0.4))); particle.velocity.add(particle.acc); particle.location.add(particle.velocity.copy().normalize().mult(p.random(2, 4))); particle.acc.mult(0); fade -= 5; }; return { ...particle, draw, move } } const createParticle = (locationP, velocity) =&gt; { const acc = p.createVector(0, 0); const location = locationP.copy(); let fade = 255; const fadeMinus = p.randomGaussian(15, 2); let ligther = 100; let situate = 62; const draw = () =&gt; { p.colorMode(p.HSB) p.stroke(16, p.constrain(situate, 62, 92), p.constrain(ligther, 60, 100), fade); const arrow = velocity.copy().mult(2); const direction = p5.Vector.add(location, arrow); p.line(location.x, location.y, direction.x, direction.y); }; const move = () =&gt; { velocity.add(acc); location.add(velocity.copy().div(p.map(velocity.mag(), 18, 0, 5, 1))); acc.mult(0); fade -= fadeMinus; ligther -= 8; situate += 8; }; const applyForce = force =&gt; { acc.add(force); }; const isDead = () =&gt; { if (fade &lt; 0 || location.x &lt; 0 || location.x &gt; p.width || location.y &gt; p.height) { return true; } else { return false; } }; return { draw, move, applyForce, isDead, velocity, location, acc }; }; const createMover = () =&gt; { const location = p.createVector(p.width / 2, p.height / 2); const velocity = p.createVector(0, 0); const acc = p.createVector(0, 0); const mass = 10; let angle = 0; let angleVelocity = 0; let angleAcc = 0; let len = 100; const particleSystems = [ createParticleSystem(location), createParticleSystem(location), createParticleSystem(location), createParticleSystem(location), createParticleSystem(location), createParticleSystem(location), createParticleSystem(location), createParticleSystem(location), createParticleSystem(location) ]; const getGotoVector = angle =&gt; { const radius = p.map(angleVelocity, 0, 0.3, 0, 80); const goToVector = p.createVector( location.x + radius * p.cos(angle), location.y + radius * p.sin(angle) ); return goToVector; }; const draw = () =&gt; { const goToVector = getGotoVector(angle); particleSystems.forEach(particleSystem =&gt; { particleSystem.run(); }); }; const renderParticleSystem = () =&gt; { particleSystems.forEach(particleSystem =&gt; { const goToVector = getGotoVector(angle - p.random(0, p.TWO_PI)); const prepencular = p.createVector( (goToVector.y - location.y)*-1, (goToVector.x - location.x) ); prepencular.normalize(); prepencular.mult(angleVelocity * 70); particleSystem.origin.set(goToVector); particleSystem.addParticle(prepencular); const gravity = p.createVector(0, 0.3); particleSystem.applyForce(gravity); }); }; const move = () =&gt; { angleAcc = 0.005; angleVelocity = p.constrain(angleVelocity + angleAcc, 0, 0.32); angle += angleVelocity; angleAcc = 0; renderParticleSystem(); }; return { draw, move }; }; let mover; p.setup = function() { p.createCanvas(230, 320); p.clear(); mover = createMover(); } p.draw = function() { p.clear(); mover.move(); mover.draw(); } }; p5Instance = new p5(sketch); } // hiding and showing loading animation function hideLoadingAnimation() { console.log(&#34;Yükleme animasyonu gizleniyor, ana içerik gösteriliyor&#34;); var loadingAnimation = document.getElementById(&#34;loading-animation&#34;); var mainContent = document.getElementById(&#34;main-content&#34;); loadingAnimation.style.display = &#34;none&#34;; mainContent.style.display = &#34;block&#34;; } window.onload = function() { console.log(&#34;Sayfa tamamen yüklendi&#34;); hideLoadingAnimation(); };</code></pre> <pre><code>.card.active::before, .card.active::after { content: &#39;&#39;; position: relative; z-index: 12; display: block; height: 200px; background-color: rgb(255, 0, 0, 0.5); } .card.active::before { margin-top: -200px; } #main-content { display: none; } * { box-sizing: border-box; } body { min-height: 100vh; display: flex; align-items: center; justify-content: center; flex-flow: column wrap; background: radial-gradient(circle, rgba(7, 50, 22, 255) 0%, rgba(0, 0, 0, 255) 100%); animation: shine 4s linear infinite; color: white; font-family: &#34;Lato&#34;; -webkit-font-smoothing: antialiased; text-rendering: optimizeLegibility; } ul { margin: 0; padding: 0; list-style-type: none; max-width: 800px; width: 100%; margin: 0 auto; padding: 15px; text-align: center; overflow-x: hidden; } .card { float: left; position: relative; width: calc(33.33% - 30px + 9.999px); height: 340px; margin: 0 30px 30px 0; transform-style: preserve-3d; transition: all 0.6s cubic-bezier(0.23, 1, 0.32, 1); } .card:first-child .card__front { background:#5271C2; } .card__front img { width: 100%; height: 100%; object-fit: cover; } .card:first-child .card__num { text-shadow: 1px 1px rgba(52, 78, 147, 0.8) } .card:nth-child(2) .card__front { background:#35a541; } .card:nth-child(2) .card__num { text-shadow: 1px 1px rgba(34, 107, 42, 0.8); } .card:nth-child(3) { margin-right: 0; } .card:nth-child(3) .card__front { background: #bdb235; } .card:nth-child(3) .card__num { text-shadow: 1px 1px rgba(129, 122, 36, 0.8); } .card:nth-child(4) .card__front { background: #db6623; } .card:nth-child(4) .card__num { text-shadow: 1px 1px rgba(153, 71, 24, 0.8); } .card:nth-child(5) .card__front { background: #3e5eb3; } .card:nth-child(5) .card__num { text-shadow: 1px 1px rgba(42, 64, 122, 0.8); } .card:nth-child(6) .card__front { background: #aa9e5c; } .card:nth-child(6) .card__num { text-shadow: 1px 1px rgba(122, 113, 64, 0.8); } .card:last-child { margin-right: 0; } .card__flipper { cursor: pointer; border: 3.5px solid rgba(255, 215, 0, 0.6); background-image: linear-gradient(45deg, rgba(255, 215, 0, 0.5), transparent, rgba(255, 215, 0, 0.5)); transform-style: preserve-3d; transition: all 0.6s cubic-bezier(0.23, 1, 0.32, 1); } .card__front, .card__back { position: absolute; backface-visibility: hidden; top: 0; left: 0; width: 100%; height: 340px; } .card__front { transform: rotateY(0); z-index: 2; overflow: hidden; } .card__back { transform: rotateY(180deg) scale(1.1); background: linear-gradient(45deg, #483D8B, #301934, #483D8B, #301934); display: flex; flex-flow: column wrap; align-items: center; justify-content: center; box-shadow: 0 4px 20px rgba(0, 0, 0, 0.3); } .card__back span { font-weight: bold; /* Metni kalın yap */ color: white; /* Beyaz renk */ font-size: 16px; position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%); } .card__name { font-size: 32px; line-height: 0.9; font-weight: 700; } .card__name span { font-size: 14px; } .card__num { font-size: 100px; margin: 0 8px 0 0; font-weight: 700; } @media (max-width: 700px) { .card__num { font-size: 70px; } } @media (max-width: 700px) { .card { width: 100%; height: 290px; margin-right: 0; float: none; } .card .card__front, .card .card__back { height: 290px; overflow: hidden; } } /* Demo */ main { text-align: center; } main h1, main p { margin: 0 0 12px 0; } main h1 { margin-top: 12px; font-weight: 300; } .fa-github { color: white; font-size: 50px; margin-top: 8px; } .tm-container { display: flex; justify-content: center; align-items: center; } .tm-letter { display:inline-block; font-size:30px; margin: 0 5px; margin-top: 10px; opacity: 0; transform: translateY(0); animation: letter-animation 6s ease-in-out infinite; } @keyframes letter-animation { 0%, 100% { opacity: 1; transform: translateY(0); } 10%, 40%, 60%, 90% { opacity: 1; transform: translateY(-10px); } 20%, 80% { opacity: 1; transform: translateY(0); } } #m-letter { animation-delay: 1.5s; } a { position: relative; display: inline-block; padding: 0px; } a::before { content: &#39;&#39;; position: absolute; top: 50%; /* Orta konumu */ left: 50%; /* Orta konumu */ transform: translate(-50%, -50%); width: 50px; height: 45px; border-radius: 50%; /* Eğer bir daire şeklinde efekt isteniyorsa */ box-shadow: 0 0 8px 4px rgba(110, 110, 110, 0.8); filter: blur(4px) brightness(1.5); / opacity: 0; transition: opacity 0.3s ease, transform 0.3s ease; z-index: -1; } a:hover::before { opacity: 1; } body.hoverEffect { background: radial-gradient(circle at center, #000000, #000033, #000066, #1a1a1a); } #gameCard { width: 300px; height: 450px; margin: 50px auto; padding: 20px; border-radius: 15px; box-shadow: 0 0 50px 10px #FFD700, 0 0 100px 20px #0000FF, 0 0 150px 30px #000033; background: rgba(0,0,0,0.7); color:#FFD700; text-align: center; border: 3px solid #FFD700; } #gameCardLink span { font-size: 18px; margin-right: 5px; font-weight: bold; } #gameCardLink span:last-child { font-size: 0.79em; vertical-align: super; opacity: 0.9; font-weight: bold; text-shadow: 2px 2px 2px rgba(0, 0, 0, 0.5); } #loading-animation { position: fixed; top: 0; left: 0; width: 100%; height: 100%; background-image:url(&#39;data:image/jpeg;base64,/); background-repeat: no-repeat; background-size: cover ; display: flex; justify-content: center; align-items: center; z-index: 9999; } .loader { border-top: 9px solid #00a2ed; border-radius: 80%; width: 12vw; height: 12vw; animation: spin 2s linear infinite; position: absolute; left: 44%; top: 46%; / transform: translate(-50%, -50%) rotate(0deg); /* Yuvarlak halkanın tam ortasında olması için bu dönüşümü kullanın. */ } @keyframes spin { 0% { transform: rotate(0deg); } 100% { transform: rotate(360deg); } }</code></pre> <pre><code>&lt;script src=&#34;https://ajax.googleapis.com/ajax/libs/jquery/3.6.4/jquery.min.js&#34;&gt;&lt;/script&gt; &lt;script src=&#34;https://cdnjs.cloudflare.com/ajax/libs/p5.js/1.4.0/p5.js&#34;&gt;&lt;/script&gt; &lt;link rel=&#34;stylesheet&#34; href=&#34;https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.4.0/css/all.min.css&#34;&gt; &lt;div id=&#34;loading-animation&#34;&gt; &lt;div class=&#34;loader&#34;&gt;&lt;/div&gt; &lt;/div&gt; &lt;div id=&#34;main-content&#34;&gt; &lt;div class=&#34;tm-container&#34;&gt; &lt;div class=&#34;tm-letter&#34; id=&#34;t-letter&#34;&gt;T&lt;/div&gt; &lt;div class=&#34;tm-letter&#34; id=&#34;m-letter&#34;&gt;M&lt;/div&gt; &lt;/div&gt; &lt;audio id=&#34;flipSound&#34; preload=&#34;auto&#34;&gt; &lt;source src=&#34;https://cdn.freesound.org/previews/321/321114_2776777-lq.ogg&#34; type=&#34;audio/wav&#34;&gt; &lt;/audio&gt; &lt;main&gt; &lt;div id=&#34;gameCardLink&#34;&gt; &lt;span&gt;G&lt;/span&gt; &lt;span&gt;a&lt;/span&gt; &lt;span&gt;m&lt;/span&gt; &lt;span&gt;e&lt;/span&gt; &lt;span&gt; &lt;/span&gt; &lt;!-- Boşluk eklemek için span ekledik --&gt; &lt;span&gt; &lt;/span&gt; &lt;span&gt;C&lt;/span&gt; &lt;span&gt; &lt;/span&gt; &lt;span&gt;a&lt;/span&gt; &lt;span&gt; &lt;/span&gt; &lt;span&gt;r&lt;/span&gt; &lt;span&gt; &lt;/span&gt; &lt;span&gt;d&lt;/span&gt; &lt;span&gt; &lt;/span&gt; &lt;span&gt;s&lt;/span&gt; &lt;span&gt;®&lt;/span&gt; &lt;/div&gt; &lt;p&gt;&lt;a href=&#34;https://github.com/murattasci06&#34;&gt;&lt;i class=&#34;fab fa-github&#34;&gt;&lt;/i&gt;&lt;/a&gt;&lt;/p&gt; &lt;/main&gt; &lt;ul&gt; &lt;li class=&#34;card&#34; &gt; &lt;div class=&#34;card__flipper&#34;&gt; &lt;div class=&#34;card__front&#34;&gt; &lt;img src=&#34;https://gecbunlari.com/wp-content/uploads/2021/12/Spiderman-No-Way-Home.jpg&#34; alt=&#34;Spiderman&#34;&gt; &lt;p class=&#34;card__name&#34;&gt;&lt;span&gt;Marvel&lt;/span&gt;&lt;br&gt;Spiderman&lt;/p&gt; &lt;p class=&#34;card__num&#34;&gt;1&lt;/p&gt; &lt;/div&gt; &lt;iframe class=&#34;frame&#34; width=&#34;225&#34; height=&#34;340&#34; src=&#34;https://www.youtube.com/embed/JfVOs4VSpmA?autoplay=1&amp;mute=1&amp;vq=hd1080&#34; title=&#34;YouTube video player&#34; frameborder=&#34;0&#34; allow=&#34;accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture; web-share&#34; allowfullscreen&gt;&lt;/iframe&gt; &lt;div class=&#34;card__back&#34;&gt; &lt;svg height=&#34;180&#34; width=&#34;180&#34;&gt; &lt;circle cx=&#34;90&#34; cy=&#34;90&#34; r=&#34;65&#34; stroke=&#34;#514d9b&#34; stroke-width=&#34;35&#34; /&gt; &lt;!-- Dış dairenin kenarı (yeşil) --&gt; &lt;circle cx=&#34;90&#34; cy=&#34;90&#34; r=&#34;83&#34; fill=&#34;none&#34; stroke=&#34;rgba(7, 50, 22, 255)&#34; stroke-width=&#34;1&#34; /&gt; &lt;/svg&gt; &lt;span&gt;1.89 Bil. $&lt;/span&gt; &lt;/div&gt; &lt;/div&gt; &lt;/li&gt; &lt;li class=&#34;card&#34;&gt; &lt;div class=&#34;card__flipper&#34;&gt; &lt;div class=&#34;card__front&#34;&gt; &lt;img src=&#34;https://i.pinimg.com/736x/1e/f1/3d/1ef13dfa4b7b8c131302e242d1ec48d7.jpg&#34; alt=&#34;Batman&#34;&gt; &lt;p class=&#34;card__name&#34;&gt;&lt;span&gt;DC&lt;/span&gt;&lt;br&gt;Batman&lt;/p&gt; &lt;p class=&#34;card__num&#34;&gt;2&lt;/p&gt; &lt;/div&gt; &lt;iframe class=&#34;frame&#34; width=&#34;225&#34; height=&#34;340&#34; src=&#34;https://www.youtube.com/embed/mqqft2x_Aa4?autoplay=1&amp;mute=1&amp;vq=hd1080&#34; title=&#34;YouTube video player&#34; frameborder=&#34;0&#34; allow=&#34;accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture; web-share&#34; allowfullscreen&gt;&lt;/iframe&gt; &lt;div class=&#34;card__back&#34;&gt; &lt;svg height=&#34;180&#34; width=&#34;180&#34;&gt; &lt;circle cx=&#34;90&#34; cy=&#34;90&#34; r=&#34;65&#34; stroke=&#34;#35a541&#34; stroke-width=&#34;35&#34;/&gt; &lt;!-- Dış dairenin kenarı (yeşil) --&gt; &lt;circle cx=&#34;90&#34; cy=&#34;90&#34; r=&#34;83&#34; fill=&#34;none&#34; stroke=&#34;rgba(7, 50, 22, 255)&#34; stroke-width=&#34;1&#34; /&gt; &lt;/svg&gt; &lt;span&gt;771 Mil. $&lt;/span&gt; &lt;/div&gt; &lt;/div&gt; &lt;/li&gt; &lt;li class=&#34;card&#34;&gt; &lt;div class=&#34;card__flipper&#34;&gt; &lt;div class=&#34;card__front&#34;&gt; &lt;img src=&#34;https://wallpapercave.com/wp/wp12279011.jpg&#34; alt=&#34;Guardians_of_the_Galaxy_Vol_3&#34;&gt; &lt;p class=&#34;card__name&#34;&gt;&lt;span&gt;Marvel&lt;/span&gt;&lt;br&gt;Guardians_of_the_Galaxy_Vol_3&lt;/p&gt; &lt;p class=&#34;card__num&#34;&gt;3&lt;/p&gt; &lt;/div&gt; &lt;iframe class=&#34;frame&#34; width=&#34;225&#34; height=&#34;340&#34; src=&#34;https://www.youtube.com/embed/u3V5KDHRQvk?autoplay=1&amp;mute=1&amp;vq=hd1080&#34; title=&#34;YouTube video player&#34; frameborder=&#34;0&#34; allow=&#34;accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture; web-share&#34; allowfullscreen &gt;&lt;/iframe&gt; &lt;div class=&#34;card__back&#34;&gt; &lt;svg height=&#34;180&#34; width=&#34;180&#34;&gt; &lt;circle cx=&#34;90&#34; cy=&#34;90&#34; r=&#34;65&#34; stroke=&#34;#bdb235&#34; stroke-width=&#34;35&#34;/&gt; &lt;!-- Dış dairenin kenarı (yeşil) --&gt; &lt;circle cx=&#34;90&#34; cy=&#34;90&#34; r=&#34;83&#34; fill=&#34;none&#34; stroke=&#34;rgba(7, 50, 22, 255)&#34; stroke-width=&#34;1&#34; /&gt; &lt;/svg&gt; &lt;span&gt;845.4 Mil. $&lt;/span&gt; &lt;/div&gt; &lt;/div&gt; &lt;/li&gt; &lt;li class=&#34;card&#34;&gt; &lt;div class=&#34;card__flipper&#34;&gt; &lt;div class=&#34;card__front&#34;&gt; &lt;img src=&#34;https://wallpaperaccess.com/full/8940499.jpg&#34; alt=&#34;Shazam&#34;&gt; &lt;p class=&#34;card__name&#34;&gt;&lt;span&gt;DC&lt;/span&gt;&lt;br&gt;Shazam2&lt;/p&gt; &lt;p class=&#34;card__num&#34;&gt;4&lt;/p&gt; &lt;/div&gt; &lt;iframe class=&#34;frame&#34; width=&#34;225&#34; height=&#34;340&#34; src=&#34;https://www.youtube.com/embed/AIc671o9yCI?autoplay=1&amp;mute=1&amp;vq=hd1080&#34; title=&#34;YouTube video player&#34; frameborder=&#34;0&#34; allow=&#34;accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture; web-share&#34; allowfullscreen &gt;&lt;/iframe&gt; &lt;div class=&#34;card__back&#34;&gt; &lt;svg height=&#34;180&#34; width=&#34;180&#34;&gt; &lt;circle cx=&#34;90&#34; cy=&#34;90&#34; r=&#34;65&#34; stroke=&#34;#db6623&#34; stroke-width=&#34;35&#34;/&gt; &lt;!-- Dış dairenin kenarı (yeşil) --&gt; &lt;circle cx=&#34;90&#34; cy=&#34;90&#34; r=&#34;83&#34; fill=&#34;none&#34; stroke=&#34;rgba(7, 50, 22, 255)&#34; stroke-width=&#34;1&#34; /&gt; &lt;/svg&gt; &lt;span&gt;462.5 Mil. $&lt;/span&gt; &lt;/div&gt; &lt;/div&gt; &lt;/li&gt; &lt;li class=&#34;card&#34;&gt; &lt;div class=&#34;card__flipper&#34;&gt; &lt;div class=&#34;card__front&#34;&gt; &lt;img src=&#34;https://images2.alphacoders.com/131/1316679.jpeg&#34; alt=&#34;Flash&#34;&gt; &lt;p class=&#34;card__name&#34;&gt;&lt;span&gt;DC&lt;/span&gt;&lt;br&gt;Flash&lt;/p&gt; &lt;p class=&#34;card__num&#34;&gt;5&lt;/p&gt; &lt;/div&gt; &lt;iframe class=&#34;frame&#34; width=&#34;225&#34; height=&#34;340&#34; src=&#34;https://www.youtube.com/embed/hebWYacbdvc?autoplay=1&amp;mute=1&amp;vq=hd1080&#34; title=&#34;YouTube video player&#34; frameborder=&#34;0&#34; allow=&#34;accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture; web-share&#34; allowfullscreen &gt;&lt;/iframe&gt; &lt;div class=&#34;card__back&#34;&gt; &lt;svg height=&#34;180&#34; width=&#34;180&#34;&gt; &lt;circle cx=&#34;90&#34; cy=&#34;90&#34; r=&#34;65&#34; stroke=&#34;#3e5eb3&#34; stroke-width=&#34;35&#34;/&gt; &lt;!-- Dış dairenin kenarı (yeşil) --&gt; &lt;circle cx=&#34;90&#34; cy=&#34;90&#34; r=&#34;83&#34; fill=&#34;none&#34; stroke=&#34;rgba(7, 50, 22, 255)&#34; stroke-width=&#34;1&#34; /&gt; &lt;/svg&gt; &lt;span&gt;560.2 Mil. $&lt;/span&gt; &lt;/div&gt; &lt;/div&gt; &lt;/li&gt; &lt;li class=&#34;card&#34;&gt; &lt;div class=&#34;card__flipper&#34;&gt; &lt;div class=&#34;card__front&#34;&gt; &lt;img src=&#34; https://images3.alphacoders.com/121/1213553.jpg&#34; alt=&#34;Dr_Strange_2&#34;&gt; &lt;p class=&#34;card__name&#34;&gt;&lt;span&gt;Marvel&lt;/span&gt;&lt;br&gt;Dr_Strange_2&lt;/p&gt; &lt;p class=&#34;card__num&#34;&gt;6&lt;/p&gt; &lt;/div&gt; &lt;iframe class=&#34;frame&#34; width=&#34;225&#34; height=&#34;340&#34; src=&#34;https://www.youtube.com/embed/aWzlQ2N6qqg?autoplay=1&amp;mute=1&amp;vq=hd1080&#34; title=&#34;YouTube video player&#34; frameborder=&#34;0&#34; allow=&#34;accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture; web-share&#34; allowfullscreen &gt;&lt;/iframe&gt; &lt;div class=&#34;card__back&#34;&gt; &lt;svg height=&#34;180&#34; width=&#34;180&#34;&gt; &lt;circle cx=&#34;90&#34; cy=&#34;90&#34; r=&#34;65&#34; stroke=&#34;#aa9e5c&#34; stroke-width=&#34;35&#34;/&gt; &lt;!-- Dış dairenin kenarı (yeşil) --&gt; &lt;circle cx=&#34;90&#34; cy=&#34;90&#34; r=&#34;83&#34; fill=&#34;none&#34; stroke=&#34;rgba(7, 50, 22, 255)&#34; stroke-width=&#34;1&#34; /&gt; &lt;/svg&gt; &lt;span&gt;955.8 Mil. $&lt;/span&gt; &lt;/div&gt; &lt;/div&gt; &lt;/li&gt; &lt;/ul&gt; &lt;/div&gt;</code></pre> </div> </div> <p></p> </answer> </body></html>

我正在构建一个基于文本的游戏，我正在从 JS 转换它。如何使变量可变？

这最初是一个来自免费代码营的 JS 项目，但为了将其放在我的作品集网站上，我想让它具有交互性。 我尝试过将变量设置为 state 并通过 p 向下传递...

我正在开发一个项目，我需要显示多个图标以及它们之间的连接线。这是我想要实现的目标的示例：

Figma 图片 我已经设法创建布局并添加图标，但我正在努力创建它们之间的连接线。我尝试过使用 CSS 边框和伪元素，但我看不到...

如何使用Arc浏览器在vscode中调试nodejs应用程序？

我最近开始使用 Arc 浏览器，并希望将其与 VS-Code 一起使用进行开发。我遇到了让它与

if(isset($_POST 没有正确调用我的提交按钮，我找不到原因

<body> <?php include("php/config.php"); if(isset($_POST['submit'])){ // $username =$_POST['username']; // $PASSWORD =$_POST['PASSWORD']; // $title =$_POST['title']; // $first_name =$_POST['first_name']; // $last_name =$_POST['last_name']; // $gender =$_POST['gender']; // $adress1 =$_POST['adress1']; // $postcode =$_POST['postcode']; $email = $_POST['email']; // $telephone =$_POST['telephone']; // $profile_blob =$_POST['profile_blob']; $verify_query = mysqli_query($con, " SELECT email FROM users WHERE email ='$email'"); if(mysqli_num_rows($verify_query) != 0 ){ echo "<div class='message'> <p> This email is used, Try another</p> </div> <br>"; echo "<a href ='javascript:self.history.back()' <button class ='btn'> Go Back </button>"; } else{ // mysqli_query($con,"INSERT INTO users(username,PASSWORD,title,first_name,last_name,gender,adress1,postcode,email,telephone)Values('$username','$PASSWORD','$title','$first_name','$last_name','$gender','$adress1','$postcode','$email','$telephone')")or die("Error Occured"); mysqli_query($con,"INSERT INTO users(email)Values('$email')")or die("Error Occured"); echo "<div class='message'> <p> Success</p> </div> <br>"; echo "<a href ='index.php' <button class 'btn'> Go Back </button>"; } }else{ ?> <nav class="nav-top"> <img src="images/Logo.PNG" class="logo"> <!--The logo--> <ul> <li><a href="Main menu.html">RentmyCaravan.io</a></li> <!--The site title, able to be clicked to go back to the main menu--> </ul> <img src="images/profile photo.PNG" class="user-pic" onclick="toggleMenu()"> <!--Triggers the script to transition to the submenu--> <div class="sub-menu-wrap" id="subMenu"> <!--Surounds the submenu--> <div class="sub-menu"> <!--The actual submenu--> <div class="user-info"> <!--Anything to do with the user like profile pic and username--> <img src="images/profile photo.PNG"> <h2>Dannissoepic</h2> </div> <hr> <!--A break line--> <a href="ListView.html" class="sub-menu-link"> <!--Where it links to--> <img src="images/list.PNG"> <!--The image for it--> <p>List view</p> <!--What the user sees--> <span>></span> <!--Makes it look nicer as a line--> </a> <a href="AddScreen.html" class="sub-menu-link"> <img src="images/+.PNG"> <p>Add a caravan</p> <span>></span> </a> <a href="Edit.html" class="sub-menu-link"> <img src="images/empty profile.PNG"> <p>Profile</p> <span>></span> </a> <hr> <a href="" class="sub-menu-link"> <img src="images/setting.PNG"> <p>Settings</p> <span>></span> </a> <a href="Main menu.html" class="sub-menu-link"> <img src="images/signout.PNG"> <p>Sign out</p> <span>></span> </a> <hr> </div> </div> </nav> <nav class="nav-site-progress"> <a href="#">Main Menu</a> <a href="#">List View</a> <hr> <br> </nav> </header> <div class="site"> <div class="box"> ----Register new user---- <br><br> Username <br> <input type="text" id="username" name="username"><br><br> Password <br> <input type="text" id="PASSWORD" name="PASSWORD"><br><br> Title <br> <input type="text" id="title" name="title"><br><br> First Name <br> <input type="text" id="first_name" name="first_name"><br><br> Last Name <br> <input type="text" id="last_name" name="last_name"><br><br> Gender <input type="text" id="gender" name="gender"> <input type="checkbox" id="fname6.2" name="fname6.2"><br><br> Address <br> <input type="text" id="adress1" name="adress1"><br><br> Postcode <br> <input type="text" id="postcode" name="postcode"><br><br> Email <br> <input type="email" id="email" name="email"><br><br> Phone Number <br> <input type="tel" id="telephone" name="telephone"><br><br> input profile image <br><br> <div style="background-color: #c7c9c9; border: 1px solid black; width: 40%; height: 110px;margin-left: auto; margin-right: auto;"> <input type="image"id ="fname12" name="fname12" style="border-color: black; width: 70px; height: 50px; text-align: center; background-color: white; " value="+"><br><br> </div> <br><br> <input type="submit" name="submit" value="Register" class="btn-secondary"> </div> </div> <script> let subMenu = document.getElementById("subMenu"); //let submenu be called by the id submenu function toggleMenu() //The actual function being called { subMenu.classList.toggle("open-menu"); //toggle the open menu css class } </script> <div> <?php } ?> </div> </body> 提供的代码主体，我使用了 not (!) 来强制它，并且我知道另一端的代码可以工作。但通过尝试不同的事情，有时我会收到特定字段（例如电子邮件）的未识别关键错误消息，但如果认为这是页面在按钮之前加载请求的结果。 确保您有form喜欢 <form method="post" action="yourpage.php"> Gender <input type="text" id="gender" name="gender"> <input type="checkbox" id="fname6.2" name="fname6.2"><br><br> Address <br> <input type="text" id="adress1" name="adress1"><br><br> Postcode <br> <input type="text" id="postcode" name="postcode"><br><br> Email <br> <input type="email" id="email" name="email"><br><br> Phone Number <br> <input type="tel" id="telephone" name="telephone"><br><br> input profile image <br><br> <div style="background-color: #c7c9c9; border: 1px solid black; width: 40%; height: 110px;margin-left: auto; margin-right: auto;"> <input type="image"id ="fname12" name="fname12" style="border-color: black; width: 70px; height: 50px; text-align: center; background-color: white; " value="+"><br><br> </div> <br><br> <input type="submit" name="submit" value="Register" class="btn-secondary"> </form> 由于您的按钮现在位于 form 内，通过单击它，您的表单将被发布（针对您指定的操作，该操作需要与您想要将请求发送到的终点相匹配，如果它留空为action="" 那么帖子将针对当前页面，在这种特定情况下您似乎需要该页面）并且由于它的名称为 submit，因此这将被传递，并且在这种情况下您的 if 应评估为 true。

MUI - 单击文本字段中的任意位置时打开日期选择器

我有一个日期选择器，当用户单击字段中的任意位置而不仅仅是日历图标时，我想显示该日期选择器。 这是选择器 导出函数 DatePickerField(props) { ...... 返回 （ ...

Vue 3.0 组件未应用 tailwind 中的类

我遇到的问题是想要使用 Tailwindcss 来设置我的 Vue 组件的样式，但它没有应用它们。它适用于我的视图和 App.vue，但不知何故不适用于组件。我遵循...

如何使用按钮来使用成帧器运动启动卡片滑动轮播的动画？

我正在尝试使用成帧器运动来制作图像滑动轮播的动画。我希望动画仅在按下按钮时才开始。问题是动画在我点击 b 之前就开始了...

将 token 设置为 cookie 后水合失败

我目前正在使用 next 14 和应用程序目录，并且我有用于登录的组件，登录后我将访问令牌设置为 cookie 并刷新页面，但是当我刷新页面时，它会抛出错误 Hydration failed 他...

Alpine.js：显示表中单击行的地址详细信息

在表格中，我有一个“查看地址”按钮，当我单击时，它将显示地址详细信息。它工作正常，但是，由于我还是 Alpine Js 的新手，当我单击视图地址时它

我是否错误地传递了这个道具？

我正在使用 React 和 Tailwind CSS 创建一个网站，我不知道为什么悬停在按钮上不起作用。 我添加了我的自定义颜色所有道具，但悬停颜色还可以，我也不知道为什么会发生反应...

如何删除<input type="date">

显示文本框及其旁边的日历图标。如何删除文本框但保留日历图标及其功能或显示日历...

术语“yar”未被识别为 cmdlet 的名称

使用此代码安装纱线后，我收到此消息。那么我应该如何在我的项目上安装yarn呢？使用 Windows 11。 npm install -g 纱线 在 922 毫秒内更改了 1 个包并审核了 2 个包 ...

Next.js 项目未编译

我使用“npx create-next-app@latest”创建了一个 nextjs 项目，1 天后它就停止工作了。 我尝试重新安装 vscode 和 node 和 npm。我也尝试过在命令舞会中运行...

Angular @for 确认列表中的更改

我正在使用 Angular 17 编写一个电子商务应用程序。 我有一个产品列表，我在一个 HTML 组件文件中使用来自 Angular/core 的 @for 块进行迭代。 这是一个

如何使用html css和js创建类别选项

如何使用 HTML、CSS 和 JavaScript 在我的网站上创建带有下拉菜单的类别选项？ 我正在开发一个网站，并尝试实现类别选择功能。我想要用户...

CSS 网格之谜：网格项中的填充

好吧，所以我使用 CSS 网格制作了一个漂亮的电子邮件表单。一切都很好，除了当我尝试在表单元素上应用一些填充时。然后东西开始从网格中流出......

如果表单的国家/地区下拉列表包含 220 个国家/地区列表，请避免使用过大的 DOM 大小

“我正在尝试提高我的页面速度分数。目前在 Google Lighthouse for Country Down 表单中出现“最大子元素”错误，解决此问题的最佳方法是什么。如何...

使用 ElectronJS 在 python 和前端之间应该使用什么通信方法？

我是 ElectronJS 的新手，我已经研究了（但不完全）ElectronJS 的文档。我想为学生做一个人脸识别考勤系统，我将使用人脸的Python库

S3桶一个月的费用？

我想知道，如果我有一个 React 前端应用程序（一个简单的组合）并且我将其托管在 aws S3 存储桶上，那么到月底我会花费多少费用。 或者谁能建议...