3

有点诡异的，

我知道你们中的一些人可能会问为什么，但我想知道一旦用户将鼠标悬停在某些链接上，您是否可以更改它们的语言？

nav li:hover {
   **change language here**
}

我实际上是想将英语转换为日语，我假设这不是用 CSS 完成的，有人对我该如何处理有任何想法吗？

谢谢

4

2 回答 2

11

您可以使用 javascript 来实现，但仅 CSS 的实现可能是这样的：

<ul class="languages">
    <li>
        <p class="english">English text here</p>
        <p class="japanese">Japanese text here</p>
    </li>
</ul>

使用 CSS：

.languages li .japanese { display: none; }
.languages li:hover .english { display: none; }
.languages li:hover .japanese { display: block; }

这是一个 jsFiddle 示例。

于 2013-07-30T12:15:29.597 回答
2

I see two ways to do that in CSS - no javascript or even jQuery is needed:

Use an attribute and the content CSS property

<li data-japanese="こんにちは世界">hello world</li>

li:hover {
    content: attr(data-japanese);
}

Use two elements that are shown alternately

<li><span lang="ja">こんにちは世界&lt;/span><span lang="en">hello world</span></li>

li [lang=ja], li:hover span {
    display:none;
}
li:hover [lang=ja] {
    display:inline;
}

This approach is has greater flexibility and is also semantically more sound.

(example at jsfiddle.net)

于 2013-07-30T12:25:03.037 回答