Question

我有一个持有一些文字的span元素。我希望能够将鼠标悬停在元素上并使文本可选。

HTML：

<span>Text to copy</span>

SCSS：

span {  

 &:hover {
   border: 1px #000 solid;
   padding: 2px;
   cursor: text;
 }
}

但是，我无法复制文本。

我尝试添加＆＃39; user-select：text＆＃39;悬停的属性，但似乎不适用于chrome。

Answer 1

user-select:text属性表示用户可以选择文本，但不会选择文本。

实现这一目标的两种方法：

在document.execCommand()

   <span contenteditable="true" onmouseover="this.focus();document.execCommand('selectAll',false,null);">mouse over on text</span>
<br/>
<span>mouse over on text</span>
<br/>
<span contenteditable="true" onmouseover="this.focus();document.execCommand('selectAll',false,null);">content editable</span> - makes the span editable

在jQuery的帮助下

注意：this.select()适用于输入和textarea。

$("textarea").mouseover(function(){
  $(this).select();
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<textarea>mouseover on text</textarea>

使用css悬停时可以选择文本

1 个答案: