所以我正在制作一个帮助学生学习外语的工具.它基本上是两列文本,第一列是目标语言,另一列是英语.我现在做的是希腊语.
我的目标是,当第一列中的一个单词悬停在上方时,它会高亮显示,第二列中对应的英语单词也会高亮显示.
数字也必须显式命名,因为希腊语和英语的词序不一样,我想我可以用类来命名.
<table>
<tr>
<td class=greek>
<span class="adv one">Πολλάκις</span>
<span class="adj one">βραχεῖα</span>
<span class="noun one">ἡδονὴ</span>
<span class="adj two">μακρὰν</span>
<span class="verb one">τίκτει</span>
<span class="noun two">λύπην</span>.
</td>
<td class=eng>
<span class="adj one">Short</span>
<span class="noun one">pleasure</span>
<span class="adv one">often</span>
<span class="verb one">begets</span>
<span class="adj two">long</span>
<span class="noun two">pain</span>.
</td>
</tr>
</table>
但是我对JQuery有着非常基本的了解,所以我不知道如何在两列中用相同的数字 Select 相同的单词.
$(".greek > .noun").hover(
function() {
$(".greek > .noun, .eng > .noun").css({'color': 'white', 'background-color': 'rgb(79,129,189)'});
}, function() {
$(".greek > .noun, .eng > .noun").css({'color': 'black', 'background-color': 'rgb(255,255,255)'});
}
);
我还想让它以相反的方式工作,即当我将鼠标悬停在英语列中的一个单词上时,希腊列中相应的单词也会高亮显示.