在有序的单词序列中："Word1, Word2, Word3"：如何在 "Word1" 和 "Word3" 上有 1 个且只有 1 个 hyperlink？因此，在单个 link 中跳过一个单词？

Question

如何在 hyperlink 中跳过一个词？

想象一个随机排列的单词序列：

... Word 1 Word 2 Word3 ...

怎么可能有 1 个统一（即不是 2 个单独的 links）hyperlink 在 Word 1 & Word 3?

即：当一个人悬停在 Word 1 或 Word 3 时，观众可以立即注意到 hyperlink 将导致包含这两个词含义的页面（ a:hover 的 CSS 在特定文档中可见。

结果将是：

... Word 1 Word 2 Word3 ...

关键评论： 但不是有 2 个单独的（在这种情况下 粗体格式的 hyperlinks），它们将统一成 1 个单一的 hyperlink。再次：这可以例如在 CSS 中可视化，方法是在 a:hover 上设置 text-decoraiton:underline，覆盖 Word 1 和Word 3同时。

可选：

最好也可以添加一个 second, other hyperlink to Word 2.

用例示例：

句子中：

"This does not need any open (Word 1) bladder (Word 2) surgeries (Word 3)."

1 在 Word 1 和 Word3 上统一 hyperlink 就好了。这个例子阐明了这样一个 word-skipping-hyperlink 的用处： Word 2 当然不应该包含在第一个统一的 link 中，因为 膀胱-维基百科 与 开放手术-维基百科.

没有太大关系

结果将是：

"This does not need any open bladder surgeries."

重要评论： 而不是 open 和 surgeries[=102= 上的 hyperlink ] 应该统一成一个单一的 hyperlink。

可选：

最好也可以添加一个 second, other hyperlink to Word 2:

"This does not need any open bladder surgeries."

上面的关键评论，在这里也适用。

Answer 1

使用 Javascript 很容易 - 为每个单词创建一个 span，将两个外部 span 设置为看起来像链接，然后将单击功能附加到两个 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');
});

Answer 2

您不能 一个 link 跨越两个单独的单词。

您可以在每个单词上使用一个 link 指向相同的位置，并使用一点点 JavaScript 突出显示具有相同目的地的所有 link当用户将鼠标悬停在一个上时。

为方便起见，我在这里使用 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()函数即可。

Answer 3

这是一个纯粹的 HTML + CSS 方法。诀窍是对第二个词应用负 z-index。这使得它无法点击：

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>
.

如果你想让第二个词有不同的 link，我想你需要复制 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>
.

Answer 4

使用纯 CSS，您可以拥有一个跨越多个词的 link，并且只有其中一些可点击。（你可以使用更多 CSS 使它看起来比我的演示更好）

这个答案不能完全满足 OP 的需求，因为它不允许在第一个 link 的上下文中使用不同的 link，但它仍然值得一提。

为了让一个 link 仅跨越多个单词，并且还有一个指向另一个 link 的嵌套元素，我们将必须允许锚标记嵌套，but it's not supported，实现相同行为的最佳方法是将 "big" 锚标记拆分为多个部分（手动或使用 JS 之类的在其他答案中建议）]。

a span
{
    color: black;
    pointer-events: none;
}

<a href="#">first <span>second</span> third</a>

Answer 5

最简单的方法可能是这个 css 规则：

a {
    text-decoration:none;
    color:red;
}
span { 
    color:black;
    cursor:default;
}

和一个简短的内联 js onclick 事件，您不希望事件传播：

<span onclick="return false;"> Word2 </span>

jsFiddle example

但不要在生产中这样做。这是毫无意义和丑陋的。

如果你想要第二个 link 在第一个里面，为了简单起见，我会这样做：

<span onclick="document.location.href = 'YOUR_2ND_LINK_HERE'; return false;"> Word2 </span>

updated jsFiddle

给你 new fiddle with visual hint

Answer 6

如果这是您想要实现的目标，那么：

Html:

<a href="http://www.wikipedia.org">
    <span class="d">Link 1</span> 
    <span class="b">Link 2</span> 
    <span class="d">Link 1</span> 
    <span class="b">Link 2</span>
    <span class="d">Link 1</span> 
    <span class="b">Link 2</span> 
</a>

Css

a {
    text-decoration:none;
}
.d {
    color:blue;
    text-decoration:underline;
}
.d.fake-hover {
    background:blue;
    color:#fff;
    text-decoration:none;
}
.b {
    color:darkRed;
    text-decoration:underline;
}
.b.fake-hover {
    background:darkRed;
    color:#fff;
    text-decoration:none;
}

Javascript:

var elems = document.getElementsByClassName('d');
var otherElems = document.getElementsByClassName('b');
var allElems = document.getElementsByTagName('span');
var _href = 'http://whosebug.com';

function fakeIt(what, el) {
    var els = (el.classList.contains('d')) ? elems : otherElems;
    for (var i = 0, x = els.length; i < x; i++) {
        (what == 'hover') ? els[i].classList.add('fake-hover') : els[i].classList.remove('fake-hover');
    }
}

function addCustomLink(e) {
    e.preventDefault();
    location.href = _href;
}

for (var i = 0, x = allElems.length; i < x; i++) {
    var el = allElems[i];
    el.addEventListener('mouseover', function(e) {
        fakeIt('hover', e.target);
    });
    el.addEventListener('mouseout', function(e) {
        fakeIt('out', e.target);
    });
    if (el.className == 'b') {
        el.addEventListener('click', function(e) {
            addCustomLink(e);
        });
    }
};

在 jsFiddle 中显然我不能使用 document.location.href 所以你必须手动编辑 addCustomLink 函数。

Fiddle here

在有序的单词序列中："Word1, Word2, Word3"：如何在 "Word1" 和 "Word3" 上有 1 个且只有 1 个 hyperlink？因此，在单个 link 中跳过一个单词？

In the ordered sequence of words: "Word1, Word2, Word3": how to have 1 and only 1 hyperlink on "Word1" & "Word3"? Thus, skip a word in a single link?

html

javascript

css

jquery

hyperlink

如何在 hyperlink 中跳过一个词？

结果将是：

可选：

用例示例：

结果将是：

可选：