在鼠标悬停时突出显示包含链接和标题的文本块的单个字符

Question

我正在努力实现将鼠标悬停在某个角色上时，该角色应该改变颜色。它应该适用于单个字符、链接、标题等。

我的以下代码给出了我想要的结果，但它删除了链接和标题。

$cont = $('.words');
parts = $.map($cont.text().split(''), function(v) {
  return $('<span />', {
    text: v
  });
});
$cont.empty().append(parts);

.words span:hover {
  color: #F00
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/1.10.0/jquery.min.js"></script>
<div class="words">
  Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum.
  <a href="#link">LINK</a>
  <h1>
    Heading
  </h1>
  Stet clita kasd gubergren, no sea takimata sanctus e Lorem ipsum dolor sit amet.
</div>

JS Fiddle: http://jsfiddle.net/bvpodc6z/1/

Answer 1

只需为每个文本节点单独映射字符，这样就不会删除您的 DOM 结构。

$('.words, .words *').contents().each(function() {
    if (this.nodeType == 3)
      $(this).replaceWith(escapeHTML(this.nodeValue).split('').map(c => `<span>${c}</span>`).join(''));
});

function escapeHTML(s) {
  return s.replace(/&/g, "&amp;")
          .replace(/</g, "&lt;")
          .replace(/>/g, "&gt;")
          .replace(/"/g, "&quot;")
          .replace(/'/g, "&#039;");
}

Answer 2

必须对 html 进行一些细微的更改，即在不在标题或 link 中的文本周围添加一个 p 标签：http://jsfiddle.net/kfbaz3gw/

$('.words').children().each( (index, el) => {
    $(el).html(function (i, html) {
      var chars = $.trim(html).split("");
      return  chars.map(c=>'<span>'+c+'</span>').join('')
  });
 })

在鼠标悬停时突出显示包含链接和标题的文本块的单个字符

Highlight an individual character of text block containing links and heading on mouse hover

html

javascript

css

jquery

sass