在单词的顺序中："Word1， Word2， Word3"：如何在"Word1"上有1个且只有1个超链接

Question

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

word1word2Word3

如何可能在Word 1上有一个统一的（即不是两个独立的链接）超链接

也就是说，当一个鼠标悬停在Word 1或Word 3上时，观众可以立即注意到超链接将指向一个包含这两个单词含义的页面（无论a:hover的CSS在特定文档中是什么，都可以看到）。

word1word2Word3

重要提示：但这样一来，它们就不会有两个单独的超链接（在本例中为粗体格式的超链接），而是统一成一个单一的超链接。同样：这可以通过在a:hover上使用text decoriton:underline同时覆盖Word 1和Word 3在CSS中可视化。

最好还可以在Word 2中添加第二个超链接。

在这句话中：

"这不需要任何打开（Word 1）膀胱（Word 2）手术（Word 3）。"

如果在word1和Word3上有一个统一的超链接就好了。这个例子阐明了这样一个跳字超链接的用处：word2当然不应该包含在第一个统一链接中，因为膀胱维基百科与开放手术维基百科没有太大关系。

"这不需要任何开放膀胱手术."

重要提示：相反，开放和手术的超链接应该统一为一个超链接。

还可以添加第二个超链接到Word 2：

"这不需要任何开放膀胱手术."

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




Answer 1

使用Javascript很容易为每个单词创建一个跨度，将两个外部跨度样式化为链接，并在两个跨度上附加一个单击函数。

HTML

html prettyprint-override"><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

这里有一个纯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>
.

Answer 3

你不能有一个跨越两个独立单词的链接。

您可以让每个单词上的一个链接指向同一位置，并使用一点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");
    });
});

css prettyprint-override">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>