在按顺序排列的单词序列中："Word1，Word2，Word3"：如何在"Word1“和"Word3”上有一个而只有一个超链接？因此，在一个链接中跳过一个单词？
如何在超链接中跳过一个单词？
想象一下一个随机有序的单词序列：
... Word 1 Word 2 Word3 ...
如何才能让1统一(即不是两个单独的链接)超链接 on Word 1 & Word 3
即:当一个人悬停在Word 1或Word 3上时，观众会立即注意到超链接将导致一个页面，该页面涵盖了这两个单词的含义(无论a:hover的CSS在特定文档中是什么，都可以看到)。
其结果将是：
Word 1 Word3 ... Word 2 ...
重要的注意事项:但是，与其有两个单独的(在本例中是粗体格式的超链接)，它们将是统一的为一个单一的超链接。再次:例如，通过在Word 1和Word 3上同时包含text-decoraiton:underline，可以在CSS中可视化。
可选：
最好也可以添加一个第二，其他超链接到Word 2。
用例示例：
在句子中：
“这不需要任何开放的
(Word 1)膀胱(Word 2)手术(Word 3)。”
如果1能在Word 1和Word3上统一超链接，那就太好了。这个例子澄清了跳过这个词的超级链接的用处：Word 2当然不应该包含在第一个统一链接中，因为膀胱维基百科汉与开放的手术没有多大关系-维基百科。
其结果将是：
“这不需要任何打开膀胱外科手术。”
关键问题:相反，、open、和上的超链接应该是，将统一为一个超链接。
可选：
最好也可以添加一个第二，其他超链接到Word 2。
“这不需要任何打开 膀胱 外科手术。”
以上的重要评论，也适用于此。
回答 6
Stack Overflow用户
发布于 2015-02-08 10:19:32
你不能有一个连接跨越两个单独的词。
您可以在每个单词上有一个链接，指向同一个位置，并使用一点JavaScript来突出显示当用户悬停在一个链接上时具有相同目的地的所有链接。
为了方便起见，我在这里使用jQuery，但是没有它也不难做到。
$(function () {
function getKey(element) {
return element.href;
}
function sameGroupAs(element) {
var key = getKey(element);
return function () {
return getKey(this) === key;
}
}
$(document)
.on("mouseenter", "a", function () {
$("a").filter(sameGroupAs(this)).addClass("active");
})
.on("mouseleave", "a", function () {
$("a").filter(sameGroupAs(this)).removeClass("active");
});
});a.active {
background-color: #A8C5FF;
}<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<p>"This does not need any <a href="http://en.wikipedia.org/wiki/Invasiveness_of_surgical_procedures#Open_surgery" rel="nofollow">open</a> <a href="http://en.wikipedia.org/wiki/Urinary_bladder" rel="nofollow">bladder</a> <a href="http://en.wikipedia.org/wiki/Invasiveness_of_surgical_procedures#Open_surgery" rel="nofollow">surgeries</a>."</p>
我已经将href用作分组密钥，但您可以使用任何其他方法进行摸索。只需修改getKey()函数即可。
Stack Overflow用户
发布于 2015-02-08 10:06:21
使用Javascript很容易--为每个单词创建一个span，将两个外部跨度设置为类似于链接的样式，并为两个跨域附加一个单击函数。
HTML
<span id = "one">one,</span>
<span id = "two">two,</span>
<span id = "three">three</span>CSS
#one, #three {
cursor:pointer;
}jQuery
$('#one, #three').click(function() {
location.href = 'http://www.google.com';
});
$('#one, #three').hover(function() {
$('#one, #three').css('text-decoration', 'underline');}, function(){
$('#one, #three').css('text-decoration', 'none');
});Stack Overflow用户
发布于 2015-02-08 10:35:02
这里有一个纯HTML + CSS方法。诀窍是对第二个单词应用负z索引。这使得它无法点击：
a {
text-decoration: none;
}
a span:nth-child(1), a span:nth-child(3) {
font-weight: bold;
}
a:hover span:nth-child(1), a:hover span:nth-child(3) {
text-decoration: underline;
}
a span:nth-child(2) {
position: relative;
z-index: -1;
}This does not need any
<a href="">
<span>open</span>
<span>bladder</span>
<span>surgeries</span>
</a>
.
如果您希望第二个单词有一个不同的链接，我认为您需要复制HTML，生成第一个实例position: absolute，以及第二个实例position: relative的第二个单词。然后，您可以根据悬停更改格式：
a {
text-decoration: none;
font-weight: bold;
}
#a1 {
position: absolute;
}
#a2 span:nth-child(2) {
position: relative;
}
#a1:hover span:nth-child(1), #a1:hover span:nth-child(3) {
text-decoration: underline;
}
#a2:hover span:nth-child(2) {
text-decoration: underline;
}This does not need any
<a id="a1" href="http://en.wikipedia.org/wiki/Invasiveness_of_surgical_procedures#Open_surgery">
<span>open</span>
<span>bladder</span>
<span>surgeries</span>
</a>
<a id="a2" href="http://en.wikipedia.org/wiki/Urinary_bladder">
<span>open</span>
<span>bladder</span>
<span>surgeries</span>
</a>
.
https://stackoverflow.com/questions/28392538
复制相似问题
腾讯云开发者
