body {
font-family: ‘Noto Sans SC’, Arial, sans-serif;
margin: 0;
padding: 0;
background-color: #fdfdfd;
}
.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;
}
.tab-group {
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);
margin-bottom: 20px;
}
.tab-content.active {
display: block;
}
h2 {
margin-top: 0;
color: #2e7d32;
}
h3 {
color: #2e7d32;
margin: 20px 0 10px 0;
}
ul {
padding-left: 20px;
}
li {
margin-bottom: 6px;
}
strong {
color: #2e7d32;
}
/* FIXED: HSK2+ tooltips – GREEN */
.hanzi-hsk2plus {
position: relative;
cursor: help;
color: #2e7d32 !important;
font-weight: bold;
border-bottom: 2px dotted #2e7d32;
padding: 0 2px;
margin: 0 1px;
display: inline-block;
}
.hanzi-tooltip {
position: absolute;
bottom: 100%;
left: 50%;
transform: translateX(-50%);
background: linear-gradient(135deg, #2e7d32, #4caf50);
color: #fff !important;
padding: 10px 12px;
border-radius: 8px;
font-size: 13px;
line-height: 1.4;
white-space: nowrap;
z-index: 1000;
opacity: 0;
visibility: hidden;
transition: all 0.2s ease;
box-shadow: 0 4px 12px rgba(46,125,50,0.4);
min-width: 140px;
text-align: center;
font-family: Arial, sans-serif;
}
.hanzi-hsk2plus:hover .hanzi-tooltip,
.hanzi-hsk2plus:focus .hanzi-tooltip {
opacity: 1;
visibility: visible;
}
.hanzi-tooltip::after {
content: ”;
position: absolute;
top: 100%;
left: 50%;
transform: translateX(-50%);
border: 8px solid transparent;
border-top-color: #2e7d32;
}
.hanzi-tooltip .pinyin {
color: #fff176 !important;
font-weight: bold;
margin: 0 0 2px 0;
font-size: 14px;
}
.hanzi-tooltip .english {
color: #e8f5e8 !important;
margin: 0;
font-size: 12px;
}
/* HSK1-2 basic – no tooltip */
.hanzi-basic {
color: #333;
}
老虎、兔子与龙的大赛故事 | Tiger, Rabbit & Dragon Race Story
中文故事 | Chinese
English Story
老虎
lǎohǔ
tiger (HSK3)
、
兔子
tùzi
rabbit (HSK3)
、
龙
lóng
dragon (HSK4)
的故事
很久以前 ，在大比赛
dà bǐsài
great race (HSK4)
中，老虎
lǎohǔ
tiger (HSK3)
有力 地游过
yóu guò
swim across (HSK3+)
冷浪
lěng làng
cold waves (HSK3+)
。大声
dà shēng
loudly (HSK3)
吼叫
hǒu jiào
roar (HSK5+)
，显示
xiǎnshì
show/display (HSK3)
他的力量
lìliàng
strength (HSK4)
。河
hé
river (HSK2)
很宽 ，他游到一半
yóu dào yībàn
halfway (HSK3+)
就累了
lèi le
got tired (HSK3)
。兔子
tùzi
rabbit (HSK3)
在浮木
fúmù
floating logs (HSK5+)
和石头 上紧张地
jǐnzhāng de
nervously (HSK4)
跳来跳去
tiào lái tiào qù
hop around (HSK4+)
。小而温柔 ，但很聪明
cōngmíng
clever (HSK3)
。大浪
dà làng
big wave (HSK3+)
差点把他冲走
bǎ tā chōng zǒu
sweep away (HSK3+)
，这时大龙
dà lóng
mighty dragon (HSK4+)
从头顶
tóudǐng
overhead (HSK4)
飞过
fēi guò
fly over (HSK2)
。善良的
shànliáng de
kind-hearted (HSK5+)
龙
lóng
dragon (HSK4)
看到兔子
tùzi
rabbit (HSK3)
的危险
wēixiǎn
danger (HSK3)
。吹风
chuī fēng
blow wind (HSK3+)
推浮木
tuī fúmù
push logs (HSK3+)
往前，帮助
bāngzhù
help (HSK2)
兔子
tùzi
rabbit (HSK3)
安全到达
ānquán dàodá
reach safety (HSK3+)
。后来
hòulái
later (HSK3)
，龙
lóng
dragon (HSK4)
对玉皇大帝
Yù Huáng Dàdì
Jade Emperor (HSK5+)
说他还 帮村民下雨
bāng cūnmín xiàyǔ
bring rain (HSK4+)
。老虎第三
lǎohǔ dì sān
Tiger 3rd (HSK3+)
，兔子第四
tùzi dì sì
Rabbit 4th (HSK3+)
，龙第五
lóng dì wǔ
Dragon 5th (HSK3+)
。[web:12]
Tiger, Rabbit, Dragon
Long ago during the great race, the Tiger swam powerfully through the cold waves.
词汇 | Vocabulary
语法 | Grammar
HSK2+ 重点词汇 | Key HSK2+ Words
老虎 lǎohǔ – tiger兔子 tùzi – rabbit龙 lóng – dragon比赛 bǐsài – race
语法要点 | Grammar
但是… (but contrast)[web:12]
就… (then/immediately)
所以… (therefore)
// Tab functionality
document.querySelectorAll(‘.tab-group’).forEach(group => {
const buttons = group.querySelectorAll(‘.tab-btn’);
const contents = group.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’);
});
});
});
Leave a Reply