類似問題:CSS只允許在元素中選擇文本 但那不是我想要的

我得到了兩個兄弟元素，如果用戶在A中開始文本選擇，那么我不希望A之外的任何其他文本是可選擇的

在代碼片段中，我嘗試使用contenteditable屬性，該行為正是我想要的，只是我必須禁用元素a中的編輯功能。

<div contenteditable>element A</div>
<div>element B</div>

如果您的div中只有文本，那么您可以使用禁用的文本輸入或文本區域來實現這種行為。當然，您必須設置CSS來獲得想要的外觀。

使用文本輸入:

input[type=text] {
  display: block;
  color: black;
  text-decoration: none;
  background: white;
  border: none;
}

<input type="text" value="element A" disabled/>
<input type="text" value="element B" disabled/>

在未來的用戶選擇中:containsounds聽起來好像它會做你想要的，但截至今天似乎沒有人實現它。

一種解決方案是將一個容器設置為user-select: none，然后將一個元素設置為當光標位于其上時允許用戶選擇。

<style>
  .container {
    user-select: none;
  }
  
  .container div:hover {
    user-select: text;
  }
</style>
<div class="container">
  <div>element A</div>
  <div>element B</div>
</div>