Question

让我说我有一个带有多个单词的句子，我想在这个句子中创建一个不是彼此相邻的单词的链接，这样当鼠标悬停在其中一个单词上时，悬停效果也将应用于链接到同一地址的其他单词。

实施例：我有[link] dog [/ link]叫[link]蓬松[/ link]。

单词＆＃34; dog＆＃34;和＆＃34;蓬松＆＃34;将链接到完全相同的页面，如果将鼠标悬停在＆＃34; dog＆＃34;，＆＃34; Fluffy＆＃34;也会突出显示。

我能以某种方式仅使用HTML（和CSS）来实现这一目标吗？如果没有，具有（最好是纯粹的）JavaScript的解决方案也可以。我想要一个有效的解决方案，即使我在一个句子中有几种不同类型的配对链接（尽管它们不一定必须成对），即使我有数百个带有这种链接的句子。

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

Answer 2

我认为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>

但在这种情况下，当您将鼠标悬停在句子上的任何位置时，该样式将应用于这两个单词。

为句子中空间分隔的单词创建单个链接

2 个答案: