Question

有点奇怪，

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

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

我实际上是想将英语转换为日语，我假设这不是用CSS完成的，任何人都对我如何去做这个有什么想法？

感谢

Answer 1

你可以用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; }

Here是一个jsFiddle示例。

Answer 2

我在CSS中看到了两种方法 - 不需要javascript甚至jQuery：

使用属性和`content` CSS属性

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

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

使用交替显示的两个元素

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

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

这种方法具有更大的灵活性，并且在语义上也更具声音。