如何跳过超链接中的单词？

Question

如何跳过超链接中的单词？

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

... Word 1 Word 2 Word3 ...

如何在Word 1 & Word 3上 1统一（即不是2个单独的链接）超链接？

即：当一个人徘徊Word 1或Word 3时，观众可以立即注意到超链接将导致一个页面覆盖这两个词的含义（通过可见） a:hover的CSS 位于特定文档中。

结果将是：

... Word 1 Word 2 Word3 ...

CRUCIAL REMARK：但后来没有2个单独的（在这种情况下是粗体格式的超链接），它们将统一成1单超链接。再次：这可能是例如通过在text-decoraiton:underline上a:hover显示 CSS ，包括 Word 1 和 Word 3 同时。

任选地：

最好还是可以向Word 2添加第二个，其他超链接。

用例示例：

在句子中：

“这不需要任何开放的(Word 1)膀胱(Word 2)手术(Word 3)。”

在Word 1和Word3上拥有 1统一超链接会很不错。这个例子澄清了这样一个单词跳过超链接的用处：Word 2当然不应该包含在第一个统一链接中，因为膀胱 - 维基百科与开放手术 - 维基百科没什么关系。

结果将是：

“这不需要任何open膀胱surgeries。”

CRUCIAL REMARK：相反，打开和手术上的超链接应统一到一个超链接中。

任选地：

最好还是可以向Word 2添加第二个，其他超链接：

“这不需要任何open bladder surgeries。”

上面的 CRUCIAL REMARK 也适用于此。

Answer 1

您不能拥有跨越两个单独字词的一个链接。

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

为方便起见，我在这里使用jQuery，但如果没有它，同样的事情并不难。

＆＃13;

$(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");
    });
});

＆＃13;

a.active {
    background-color: #A8C5FF;    
}

＆＃13;

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

＆＃13;

我已将href用作分组键，但您可以使用任何其他groping方法。只需修改getKey()功能。

Answer 2

使用Javascript很容易 - 为每个单词创建一个跨度，将两个外跨区设置为看起来像链接，并将单击功能附加到两个跨度。

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

如果您希望第二个单词具有不同的链接，我认为您需要复制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 ，您可以拥有一个跨越多个单词的链接，并且只有部分可单击。（并且你可以使用更多 CSS ）

让它看起来比我的演示更好

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

为了使一个链接仅跨越多个单词，并且还有一个指向另一个链接的嵌套元素，我们必须允许锚标记嵌套，{{3}实现相同行为的最佳方法是分割＆＃34; big＆＃34;将标签锚定为碎片（手动或使用 JS ，如其他答案中建议的那样）]。

＆＃13;

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

＆＃13;

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

＆＃13;

Answer 5

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

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

以及您不想传播该事件的简短内联js onclick事件：

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

jsFiddle example

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

如果您想在第一个链接中使用第二个链接，为了简单起见，我会这样做：

<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://stackoverflow.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”和“Word1”上有1个且仅有1个超链接。 “WORD3”？因此，在单个链接中跳过一个单词？

如何跳过超链接中的单词？

结果将是：

任选地：

用例示例：

结果将是：

任选地：

6 个答案: