javascript - 自动选择超链接的显示文本

Question

如何在悬停时自动选择超链接的显示文本？

let aryAnchors = [... document.getElementsByTagName("a")];
for(a of aryAnchors)
{
    a.addEventListener("mouseover",function()
    {
        // What goes here?
    });
}

或者，如果这可以在 CSS3 中完成，那就更好了。

一些背景(如果你愿意的话):

我有一个页面，用户经常想通过突出显示它并按 control-C 将显示的超链接文本复制到剪贴板(但他们还设置了其他快捷键，可以对所选文本执行其他操作只是将其复制到他们的剪贴板)。

在超链接周围手动突出显示(不单击它，或者不复制所选内容两端的空白区域)很麻烦。

在不使用浏览器扩展的情况下，我希望在悬停时选中超链接的显示文本，这样用户所要做的就是将鼠标悬停在超链接上，然后按 ctrl-C(作为示例)。

Answer 1

不是通过 CSS。这里需要 JavaScript。

使用 selectNodeContents range 接口(interface)的设置一个节点的内容到范围。然后将其添加到 selection 对象。

这是一个粗略的演示片段:

function select(elem) {
  var range, selection;    
  selection = window.getSelection(); 
  range = document.createRange();
  range.selectNodeContents(elem);
  selection.removeAllRanges();
  selection.addRange(range);
}
function deselect() {
  var selection = window.getSelection(); 
  selection.removeAllRanges();
}

document.addEventListener('mouseover', textselection);
document.addEventListener('mouseout', textdeselection);

function textselection(e) {
  if (e.target.tagName === 'A') { select(e.target); }
}
function textdeselection(e) {
  if (e.target.tagName === 'A') { deselect(); }
}

* { box-sizing: border-box; padding:0; margin: 0; font-family: sans-serif;  }
a { margin: 8px; }
p, ul, hr { margin: 8px; }

<p>Below is a list of links which you can select by hovering over. You need to first focus the page by clicking anywhere on the document.</p>
<div>
  <a href="#">Link one</a>
  <a href="#">Link two</a>
  <a href="#">Link three</a>
</div>
<hr>
<p>Below is a list which you cannot select by hovering over.</p>
<ul><li>List Item 1</li><li>List Item 2</li><li>List Item 3</li></ul>

还有一把 fiddle :https://jsfiddle.net/abhitalks/826qh1fn/