1

假设我有一个包含多个单词的句子，并且我想从该句子中的多个单词创建一个链接，这些单词彼此不相邻，因此当悬停在其中一个单词上时，悬停效果也将是适用于链接到同一地址的其他单词。

示例：我有一个名为 [link]fluffy[/link] 的 [link]dog[/link]。

单词“dog”和“Fluffy”将链接到完全相同的页面，如果将鼠标悬停在“dog”上，“Fluffy”也会突出显示。

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

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 回答