diff --git a/client/css/body.css b/client/css/body.css index ec80024..d094d8b 100644 --- a/client/css/body.css +++ b/client/css/body.css @@ -63,6 +63,19 @@ body { z-index: 10; } +/* Firefox兼容性修复:控制翻转时按钮的可见性 */ +.flip-card-inner.flipped .flip-card-front .help-btn { + visibility: hidden; + opacity: 0; + pointer-events: none; +} + +.flip-card-inner:not(.flipped) .flip-card-back .help-btn { + visibility: hidden; + opacity: 0; + pointer-events: none; +} + .help-btn:hover { background: #30a8f7; border-color: #30a8f7; diff --git a/client/js/ui.js b/client/js/ui.js index f02caf8..50b050c 100644 --- a/client/js/ui.js +++ b/client/js/ui.js @@ -598,13 +598,19 @@ export function initFlipCard() { // 当前旋转角度 / Current rotation angle let currentRotation = 0; - - // 执行翻转操作 / Execute flip operation + // 执行翻转操作 / Execute flip operation function performFlip() { currentRotation += 180; const flipCardInner = flipCard.querySelector('.flip-card-inner'); if (flipCardInner) { flipCardInner.style.transform = `rotateX(${currentRotation}deg)`; + + // 添加或移除flipped类来控制按钮可见性(Firefox兼容性修复) + if (currentRotation % 360 === 180 || currentRotation % 360 === -180) { + flipCardInner.classList.add('flipped'); + } else { + flipCardInner.classList.remove('flipped'); + } } }