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

Creating a single link for spatially separated words in sentence

本文关键字：单词 创建 单个 链接 分离 句子 空间      更新时间：2023-09-26

假设我有一个包含多个单词的句子，我想从这个句子中不相邻的多个单词创建一个链接，这样当悬停在其中一个单词上时，悬停效果也会应用于链接到同一地址的其他单词。

示例：我养了一只叫[林克]毛绒[林克]。

单词"dog"answers"Fluffy"将链接到完全相同的页面，如果将鼠标悬停在"dog（狗）"上，"Fluffly（蓬松）"也将突出显示。

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

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

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

但在这种情况下，当你将鼠标悬停在句子的任何位置时，风格都会应用于这两个词。

相关文章：