cn story with tooltip

body { font-family: ‘Noto Sans SC’, Arial, sans-serif; margin: 0; padding: 0; background-color: #fdfdfd; } header { background-color: #ffeb3b; padding: 20px 0; text-align: center; } header h1 { margin: 0; font-size: 2.2em; color: #2e7d32; font-weight: bold; } .container { max-width: 900px; margin: 20px auto; padding: 0 15px; } .story-block { background-color: #fffde7; padding: 20px; border-radius: 10px; box-shadow: 0 2px 6px rgba(0,0,0,0.1); margin-bottom: 20px; line-height: 1.6; } .tabs { margin: 20px 0; } .tab-buttons { display: flex; justify-content: space-around; margin-bottom: 10px; flex-wrap: wrap; gap: 8px; } .tab-buttons button { padding: 10px 20px; cursor: pointer; background-color: #ffe082; border: none; border-radius: 5px; font-weight: bold; transition: background-color 0.3s; } .tab-buttons button.active { background-color: #ffca28; } .tab-content { display: none; background-color: #fff8e1; padding: 20px; border-radius: 10px; box-shadow: 0 2px 6px rgba(0,0,0,0.1); } .tab-content.active { display: block; } h2 { margin-top: 0; color: #2e7d32; } h3 { color: #388e3c; margin-top: 20px; } ul { padding-left: 20px; } li { margin-bottom: 6px; } strong { color: #2e7d32; } .day-title { color: #1976d2; font-size: 1.3em; margin-bottom: 10px; } /* 新增：中文悬停词典弹窗样式 */ .chinese-word { position: relative; cursor: help; color: #d32f2f; font-weight: bold; border-bottom: 2px dotted #d32f2f; padding: 0 2px; margin: 0 1px; } .dictionary-tooltip { position: absolute; bottom: 100%; left: 50%; transform: translateX(-50%); background: linear-gradient(135deg, #fff3e0, #ffe0b2); color: #333; padding: 12px; border-radius: 8px; box-shadow: 0 4px 12px rgba(0,0,0,0.15); font-size: 14px; line-height: 1.4; white-space: nowrap; z-index: 1000; min-width: 180px; border: 2px solid #ff9800; opacity: 0; visibility: hidden; transition: all 0.2s ease; pointer-events: none; } .chinese-word:hover .dictionary-tooltip, .chinese-word:focus .dictionary-tooltip { opacity: 1; visibility: visible; } .dictionary-tooltip::after { content: ”; position: absolute; top: 100%; left: 50%; transform: translateX(-50%); border: 6px solid transparent; border-top-color: #ff9800; } .tooltip-header { font-weight: bold; color: #e65100; margin-bottom: 4px; font-size: 15px; } .tooltip-pinyin { color: #1976d2; font-size: 13px; margin-bottom: 2px; } .tooltip-english { color: #2e7d32; } // 原有的标签页功能 const buttons = document.querySelectorAll(‘.tab-btn’); const contents = document.querySelectorAll(‘.tab-content’); buttons.forEach(button => { button.addEventListener(‘click’, () => { buttons.forEach(btn => btn.classList.remove(‘active’)); contents.forEach(content => content.classList.remove(‘active’)); button.classList.add(‘active’); document.getElementById(button.dataset.tab).classList.add(‘active’); }); }); // 新增：支持键盘访问悬停词典（Tab键） document.querySelectorAll(‘.chinese-word’).forEach(word => { word.addEventListener(‘focus’, () => { word.classList.add(‘hover-active’); }); word.addEventListener(‘blur’, () => { word.classList.remove(‘hover-active’); }); });