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

比方说，我有一个包含多个单词的句子，并且我想从此句子中的多个单词中创建不相邻的单词链接，以便在悬停在其中一个单词上时，悬停效果也将应用于链接到相同地址的其他单词。在句子中为空间分隔的单词创建单个链接

例如：我有一个名为[link]蓬松[/ link]的[link] dog [/ link]。

单词“狗”和“蓬松”将链接到完全相同的页面，如果在“狗”上方悬停，“蓬松”也会突出显示。

我能以某种方式使用HTML（和CSS）来完成此操作吗？如果不是的话，一个带有（最好是纯粹的）JavaScript的解决方案也可以。即使我在一个句子中有几种不同类型的配对连接（尽管它们不一定是配对），并且即使我拥有数百个包含这种连接的句子，我也需要一种解决方案。

来源

2013-02-15 5th

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-15 10:41:23

谢谢，虽然我首先想找一个纯粹的JavaScript解决方案。它可以沿着同样的路线完成吗？ – 5th 2013-02-15 12:36:30

是的，我敢肯定，您可以使用纯粹的JavaScript解决方案。我对JavaSCript并不擅长，所以当jQuery出现时我很高兴，因为它让我做了很多事情，而我之前把我的头发拉了出来。 – 2013-02-15 12:38:05

我可能最终还是会去jQuery阵营，但是我会一直等到我亲身体验过它让事情变得更好的原因:)目前我正在开发一个非常小的项目，所以我会尝试保持最低限度的技术。无论如何感谢您的回答！ – 5th 2013-02-15 13:27:43

我认为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-15 12:06:04

每个字都会有不同的链接，所以它不会这么做。不管怎么说，还是要谢谢你！ – 5th 2013-02-15 12:29:16

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

回答

相关问题