freedak/fj
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

fix: 移动端播放按钮点按后粘连放大的问题

Browse Source 
.btn-play:hover 的 scale(1.05) 在触屏上点按后 :hover 粘住不解除，
改为仅 (hover: hover) and (pointer: fine) 设备生效。

Generated with [Devin](https://devin.ai)

Co-Authored-By: Devin <158243242+devin-ai-integration[bot]@users.noreply.github.com>
This commit is contained in:
selfrelease
2026-10-05 15:59:14 +08:00
co-authored by Devin
parent 6329f3f6b4
commit bffe5cfced
3 changed files with 6 additions and 3 deletions
Download Patch File Download Diff File Expand all files Collapse all files
style.css
+4 -1
View File
@@ -151,7 +151,10 @@ body {
box-shadow: 0 6px 16px rgba(158, 43, 37, 0.35);
transition: transform 0.15s ease, box-shadow 0.15s ease;
}
.btn-play:hover { transform: scale(1.05); box-shadow: 0 8px 20px rgba(158, 43, 37, 0.45); }
/* hover 仅在支持悬停的设备（鼠标）生效——手机点按后 :hover 会粘住，导致按钮保持放大 */
@media (hover: hover) and (pointer: fine) {
.btn-play:hover { transform: scale(1.05); box-shadow: 0 8px 20px rgba(158, 43, 37, 0.45); }
}
.btn-play:active { transform: scale(0.97); }
.btn-play:focus-visible { outline: 3px solid var(--gold); outline-offset: 3px; }
.btn-play .icon { width: 24px; height: 24px; fill: currentColor; }