CSS 实现多语言对译高亮

在前端，常常需要顯示不同語言對譯的情況。例如，本站的滿－和－漢對譯。如何不使用JavaScript而能實現貓屎（滑鼠）忽（hover）在一種語言的一部分，另一種語言的一部分也高亮（反白）呢？這個需求可以簡化成高亮一個元素，對應的幾個元素也高亮。你可以看看下面的例子：

 si injeci hon saikan  
 あなたが笑うときはとても美しい 
 你笑起來真好看 
 niyengniyeri ilha-i gese  
 春の花のように 
 像春天的花一樣 
 eiten akacun jai, eiten nasacun geterembumbi  
 すべての悩みやすべての悲しみを払いのける 
 把所有的煩惱所有的憂愁統統都吹散 
 si injeci hon saikan  
 あなたが笑うときはとても美しい 
 你笑起來真好看 
 juwari elden -i gese  
 夏の光のように 
 像夏天的陽光 

CSS的選擇器只能向下向後選擇，除非是使用 :has()。選擇相鄰的同級元素用 +；選擇同層級的後繼元素用 ~。

注意由於自然語言的語法，每一行第n個詞的順序可能不是遞增的。所以每個詞以相應的 class （word-${index}）標記。

設有三個 div.hl-line A、B、C，裡面有最多 n 個相應的 span，如下：

<section class="parent">
    ...
    <div class="hl-line">
        <span class="word-0">...</span>
        <span class="word-1">...</span>
        <span class="word-2">...</span>
        <span class="word-3">...</span>
        <span class="word-4">...</span>
        ...
        <span class="word-n">...</span>
    </div>
    <div class="hl-line">
        <span class="word-6">...</span>
        <span class="word-5">...</span>
        <span class="word-3">...</span>
        ...
    </div>
    <div class="hl-line">
        <span class="word-2">...</span>
        <span class="word-4">...</span>
        <span class="word-2">...</span>
        ...
    </div>
    ...
</section>

那麼我們的這個問題可以切分成：

滑鼠懸浮在 div A 的第 n 個 span 上時，後面兩個 div 的第 n 個詞高亮；
滑鼠懸浮在 div C 的第 n 個 span 上時，前面兩個 div 的第 n 個詞高亮；
滑鼠懸浮在當前 div 的第 n 個 span 的一部分上時，當前 div 的所有同 index 的 div 高亮；（如示例中「把……吹散」）
滑鼠當前懸浮的 span 高亮。（這個被上一個需求覆蓋了）

於是有 CSS：

/* 當前懸浮的 span */
div.hl-line>span:hover,
/* 滑鼠懸浮在 div A 的第 n 個 span 上時，後面兩個 div 的第 n 個詞高亮 */
div.hl-line:has(.word-0:hover) > .word-0,
div.hl-line:has(.word-1:hover) > .word-1,
div.hl-line:has(.word-2:hover) > .word-2,
div.hl-line:has(.word-3:hover) > .word-3,
div.hl-line:has(.word-4:hover) > .word-4,
div.hl-line:has(.word-5:hover) > .word-5,
div.hl-line:has(.word-6:hover) > .word-6,
/* 滑鼠懸浮在 div C 的第 n 個 span 上時，前面兩個 div 的第 n 個詞高亮 */
div.hl-line:has(.word-0:hover) ~ div.hl-line>.word-0,
div.hl-line:has(.word-1:hover) ~ div.hl-line>.word-1,
div.hl-line:has(.word-2:hover) ~ div.hl-line>.word-2,
div.hl-line:has(.word-3:hover) ~ div.hl-line>.word-3,
div.hl-line:has(.word-4:hover) ~ div.hl-line>.word-4,
div.hl-line:has(.word-5:hover) ~ div.hl-line>.word-5,
div.hl-line:has(.word-6:hover) ~ div.hl-line>.word-6,
/* 滑鼠懸浮在當前 div 的第 n 個 span 的一部分上時，當前 div 的所有同 index 的 div 高亮 */
div.hl-line:has(~ div.hl-line>.word-0:hover)>.word-0,
div.hl-line:has(~ div.hl-line>.word-1:hover)>.word-1,
div.hl-line:has(~ div.hl-line>.word-2:hover)>.word-2,
div.hl-line:has(~ div.hl-line>.word-3:hover)>.word-3,
div.hl-line:has(~ div.hl-line>.word-4:hover)>.word-4,
div.hl-line:has(~ div.hl-line>.word-5:hover)>.word-5,
div.hl-line:has(~ div.hl-line>.word-6:hover)>.word-6
{
    background-color: #ffff00;
}

你可以使用一些 CSS 前處理器來簡化這個重複的程式碼：

$max-words: 6;
div.hl-line>span:hover,
@for $i from 0 through $max-words {
    div.hl-line:has(.word-#{$i}:hover) > .word-
    div.hl-line:has(.word-#{$i}:hover) ~ div.hl-line>.word-#{$i},
    div.hl-line:has(~ div.hl-line>.word-#{$i}:hover)
    {
        .word-#{$i} {
            background-color: #ffff0080;
        }
    }
}

版權許可

本作品採用 知識共享署名—相同方式共享 4.0 國際許可協議（CC BY-SA 4.0 International）許可，閣下可自由地共享（複製、發行）和演繹（修改、轉換或二次創作）這一作品，唯須遵守許可協議條款。

CSS 實現多語言對譯高亮

版權許可

評論