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

CSS でこれを行うには 2 つの方法があります。javascript や jQuery さえも必要ありません。

属性とcontentCSS プロパティを使用する

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

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

交互に表示される 2 つの要素を使用する

<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;
}

このアプローチは柔軟性が高く、意味論的にも優れています。

（jsfiddle.netの例）

于 2013-07-30T12:25:03.037 に答える