使用CSS选择链接文本

我正在一个网站上工作，该网站收集着名的报价。报价文本是一个链接，可以做其他事情[...]但我也希望用户可以选择并复制报价文本。使用CSS选择链接文本

但几乎在每个浏览器中，用户都无法轻松选择链接中的文本。

是否有可能在CSS中覆盖它并使用户可以选择文本？

来源

2012-07-19 Lukas

我认为首先你需要弄清楚你如何想象这个工作。如果点击链接并没有把你带到任何地方，你将如何到达链接？如果你不能点击它，你将如何选择文本？ – 2012-07-19 20:11:23

不，但是您不应该在链接中包含大量文本块 - 理想情况下，链接应该只是一个或两个单词，而不是整个段落。

来源

2012-07-19 20:13:32

你不能。然而，你可以让一个元素看起来像一个链接，但是使用JS来处理它的“链接”部分。

的jQuery：

$(".q").click(function() { 
    window.location.href=$(this).attr('data-link'); 
});

HTML：

<span data-link="link.html" class="q">text here</span>

CSS（给它的 “手” 光标）

.q { 
    cursor: pointer; 
}

Demo

我只想保持引用只是文本（无链接），然后在最后添加一个更小的链接以获取更多信息或任何可能的信息。

来源

2012-07-19 20:15:27 sachleen

这只有在您选择整个链接或从中间到一端时才有效。如果你在中间选择一个短语，它会触发windows.location – 2012-07-19 20:24:49

另外，如果你使用JavaScript来实现常规文本的链接功能，你会为屏幕阅读器或浏览器中禁用javascript的人创建一个主要的可访问性问题（根据公司政策或出于安全原因。） – 2012-07-19 20:35:33

@ForteL，良好的捕获。罗迪：是的。就像我说的，我不会这样做，只是提供一个可能的解决方案。 – sachleen 2012-07-19 20:38:39

这不是CSS的工作，因为这是功能性，而不是渲染。这是一个棘手的问题，因为点击链接应该意味着遵循这个链接，打破这个链接会造成主要的可用性问题。

最好的方法是避免使报价链接和使用链接与他们分开。例如，报价下面的信用额度或信用中引用资源的名称将是一个自然的链接。如果你想点击“做别的事情”，那么也许你应该使用按钮，而不是链接，与报价相关联。

来源

2012-07-19 20:15:51

我不能说没有在行动中看到您的网站，但我怀疑的问题是，你的链接标签包含的不仅仅是报价多。

如果该链接显示为“生存还是毁灭 - 这是个问题”，然后选择它应该是与选择的任何其他问题。如果链接是“这是一个伟大的报价：'是或不是 - 这就是问题，点击此处做其他事情！”那么他们将无法选择中间的文本，这是他们想要的。

请确保您的链接文本只有他们想要选择的文本，并将任何其他内容放在标签之外，您就会好起来的。

来源

2012-07-19 20:16:24 sgress454

我认为OP希望允许他/她的用户选择*报价的任何部分*。 – 2012-07-19 20:36:16

在Firefox中，您可以通过按Alt键选择部分超链接，然后像往常一样用鼠标选择。因此，一种选择是使用jQuery来实现类似的东西：如果Alt键被按下（或您指定键）和鼠标指针悬停在链接，然后禁用链接。当密钥被释放时，启用链接。当然，您必须告诉您的用户如何进行选择。

来源

2012-07-19 20:33:13

显然这也适用于Chrome。谢谢你的提示！ – cvsguimaraes 2017-09-23 11:26:14

这是我想出的方法。

它采用了<span>代替<a>标签，但其工作方式就像一些奖金的常规链接。翻转文本时，会有500毫秒的超时时间，这会将光标更改为文本选择光标。单击并拖动文本不会触发单击操作，但是双击文本（选择整个单词）仍会触发单击事件。这可以得到改善，但它运作良好，可用于生产。

另一种更好的方法是在超时执行时，它还在按钮右上角显示一个小剪贴板图标，可以单击该按钮将文本复制到剪贴板。当你按下按钮.mouseout()时，它会隐藏这个剪贴板图标。

此外，另一个功能可能是清除鼠标离开按钮时的文本选择。（Clear Text Selection with JavaScript）

HTML

<span data-href="javascript:alert('This is the click action.');" class="link selectable"> 
    <span>[email protected]</span> 
</span>

CSS

.link { 
    font: 16px/0 Tahoma, sans-serif; 
    padding: 15px 30px; 
    border: 1px solid #0079be; 
    border-radius: 4px; 
    color: #0079be; 
    cursor: pointer; 
} 
.link:hover { 
    color: #fff; 
    background: #0079be; 
} 
.link.selectable > span { 
    display: inline-block; 
} 
.link.selectable.selecting > span { 
    cursor: text; 
}

的JavaScript

$('.link.selectable > span').hover(
    function() { 
    var selectableTimeout = setTimeout(
     function(elem) { 
     $(elem).parent().addClass('selecting'); 
     }, 
     500, this 
    ); 
    $(this).data('selectableTimeout', selectableTimeout); 
    }, 
    function() { 
    clearTimeout($(this).data('selectableTimeout')); 
    $(this).parent().removeClass('selecting'); 
    } 
); 
$('.link.selectable').mousedown(
    function(e) { 
    $(this).data('mouseX', e.pageX); 
    $(this).data('mouseY', e.pageY); 
    } 
); 
$('.link.selectable').mouseup(
    function(e) { 
    var mouseX = $(this).data('mouseX'); 
    var mouseY = $(this).data('mouseY'); 
    if (mouseX && mouseY && mouseX === e.pageX && mouseY === e.pageY) { 
     window.location.href = $(this).attr('data-href'); 
    } 
    } 
);

012一个段落标记内

来源

2016-08-10 11:59:49 Gavin

-1

认沽锚标记，这将是可选的，以及点击，这样

<p><a href="#">Click Me</a></p>

简单和容易。

来源

2016-10-27 07:11:32 Srijay

使用CSS选择链接文本

回答

相关问题