1

いくつかの単語を含む文があり、この文で隣り合っていない複数の単語からリンクを作成して、単語の1つにカーソルを合わせると、ホバー効果も同じアドレスにリンクされている他の単語に適用されます。

例: 私は [link]fluffy[/link] という名前の [link]dog[/link] を飼っています。

「犬」と「ふわふわ」という単語はまったく同じページにリンクされ、「犬」にカーソルを合わせると「ふわふわ」も強調表示されます。

HTML (および CSS) のみを使用して何らかの方法でこれを達成できますか? そうでない場合は、(できれば純粋な) JavaScript を使用したソリューションでも問題ありません。1 つの文の中に複数の異なる種類のペア リンク (必ずしもペアである必要はありません) がある場合や、この種のリンクを含む数百の文がある場合でも機能するソリューションが必要です。

4

2 に答える 2

1

jQuery ソリューション: http://jsfiddle.net/JhjuT/

Grumpy <a class="link" href="#">wizards</a> make toxic brew for the evil <a class="link" href="#">Queen</a> and Jack.

$(".link").hover(
    function () {
        $(".link").addClass("linkhover");
    },
    function () {
        $(".link").removeClass("linkhover");
    }
);

.linkhover {
    color: red;
}
于 2013-02-15T10:41:23.860 に答える
0

javascriptソリューションが最善の策だと思います。あなたはほとんどCSSでそれを行うことができます。

<html>
<head>
<style>
.sentence:hover .word {background-color:red;}
</style>
<body>
<span class=sentence>I have a <span class=word>dog</span> called <span class=word>fluffy</span>.</span>
</body>
</html>

ただし、この場合、文のどこかにカーソルを合わせると、両方の単語にスタイルが適用されます。

于 2013-02-15T12:06:04.600 に答える