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;
}
猫、老鼠与牛的故事 | Cat, Rat & Ox Race Story
中文故事 | Chinese
English Story
猫
māo
cat (HSK2)
、
老鼠
lǎoshǔ
rat (HSK3)
、
牛
niú
ox (HSK2)
的故事
很久以前 ，玉皇大帝
Yù Huáng Dàdì
Jade Emperor (HSK5+)
要举行大比赛
dà bǐsài
great race (HSK4)
。猫
māo
cat (HSK2)
和老鼠
lǎoshǔ
rat (HSK3)
是好 朋友
hǎo péngyǒu
good friends (HSK2)
。游泳
yóuyǒng
swim (HSK2)
。老鼠
lǎoshǔ
rat (HSK3)
说：“我们找牛
niú
ox (HSK2)
帮忙吧！”牛
niú
ox (HSK2)
又强壮
qiángzhuàng
strong (HSK4)
又善良
shànliáng
kind (HSK5)
。上来 吧！”猫
māo
cat (HSK2)
和老鼠
lǎoshǔ
rat (HSK3)
跳到牛背
niú bèi
ox’s back (HSK3)
上。牛
niú
ox (HSK2)
慢慢走进河
hé
river (HSK2)
里。猫
māo
cat (HSK2)
觉得太阳 很暖和 ，闭上眼睛 睡觉
shuìjiào
sleep (HSK2)
。老鼠
lǎoshǔ
rat (HSK3)
聪明
cōngmíng
clever (HSK3)
，他想得到第一名
dì yī míng
first place (HSK3)
。悄悄地
qiāoqiāo de
quietly (HSK3)
把猫
bǎ māo
the cat (HSK2)
推下水
tuī xià shuǐ
push into water (HSK3+)
！猫
māo
cat (HSK2)
大叫 ，掉进冰冷
bīnglěng
icy cold (HSK4)
河
hé
river (HSK2)
里。岸边
ànbiān
shore (HSK3)
时，老鼠
lǎoshǔ
rat (HSK3)
从牛头
niú tóu
ox’s head (HSK3)
跳下来 ，跑
pǎo
run (HSK1)
到岸上
àn shàng
bank/shore (HSK2)
。玉皇大帝
Yù Huáng Dàdì
Jade Emperor (HSK5+)
说：“老鼠
lǎoshǔ
rat (HSK3)
第一名
dì yī míng
first place (HSK3)
！”牛
niú
ox (HSK2)
第二个 。猫
māo
cat (HSK2)
很晚 才游
yóu
swim (HSK2)
到岸边
ànbiān
shore (HSK3)
，已经没有名次
méiyǒu míngcì
no place (HSK3+)
了。猫
māo
cat (HSK2)
记恨
jìhèn
hold grudge (HSK5+)
老鼠
lǎoshǔ
rat (HSK3)
。猫
māo
cat (HSK2)
还 追
zhuī
chase (HSK2)
老鼠
lǎoshǔ
rat (HSK3)
！[web:12]
Cat, Rat and Ox
Long ago, the Jade Emperor held a great race. The Cat and Rat were good friends but couldn’t swim.
词汇 | Vocabulary
语法 | Grammar
表达 | Expressions
文化 | Culture
HSK2+ 重点词汇 | Key HSK2+ Words
猫 māo – cat (HSK2)老鼠 lǎoshǔ – rat (HSK3)牛 niú – ox (HSK2)游泳 yóuyǒng – swim (HSK2)强壮 qiángzhuàng – strong (HSK4)聪明 cōngmíng – clever (HSK3)推下水 tuī xià shuǐ – push into water
语法要点 | Grammar Points
把结构 : 悄悄地把猫推下水 – 把 + object + verb[web:12]从…跳下来 : 从牛头跳下来 – 从 (from location)数字名次 : 第一名/第二名 – Number + 名因果 : 所以猫还追老鼠 – Therefore
实用表达 | Useful Phrases
我们找牛帮忙吧！ – Let’s ask Ox for help!悄悄地把猫推下水 – Quietly push cat into water老鼠第一名！ – Rat is first place!猫记恨老鼠 – Cat holds grudge against rat
生肖文化 | Zodiac Culture
生肖顺序 : 鼠第一，牛第二，猫无位[web:12]玉皇大帝 : 中国神话最高神猫追鼠 : 解释现实猫鼠天敌关系
// 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’);
});
});
});
