当用户在jQuery中将光标拖到某段文本上时如何突出显示该段文本

Question

当用户在 jQuery 中将光标拖到某段文本上时，我无法突出显示该段文本

我尝试过使用 jQuery 提供给您的 .select() 函数，但它似乎没有在

上工作

这是一个例子

<div>
  Some random text <span class="highlighted_text">Highlighted text</span>
</div>

当用户将光标拖到某个文本上时，它会包裹在标签中他们拖过的文本上

谢谢，

阿纳夫 ????

Answer 1

您可以使用 CSS 将其突出显示，只需这样做：

CSS：

.highlighted_text:hover {
    background-color: blue;
    color: white;
}

HTML：

<div>
  Some random text <span class="highlighted_text">Highlighted text</span>
</div>

---

但是如果你想在鼠标失去焦点后仍然突出显示文本部分，你必须让它更复杂一点，像这样：

CSS：

@keyframes hover {
  0% {
    color: #000;
  }
  100% {
    background-color: #00F;
    color: #FFF;
  }
}

.highlighted_text {
  animation-name: hover;
  animation-duration: 1000ms;
  animation-fill-mode: both;
  animation-play-state: paused;      
}

.highlighted_text:active,
.highlighted_text:focus,
.highlighted_text:hover {
  animation-play-state: running;
}

HTML：

<div>
  Some random text <span class="highlighted_text">Highlighted text</span>
</div>