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

Posted 2023-05-08

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

【英文标题】：Highlight an individual character of text block containing links and heading on mouse hover

【发布时间】：2022-01-15 21:21:04

【问题描述】：

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

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

$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 小提琴： http://jsfiddle.net/bvpodc6z/1/

【问题讨论】：

您正在获取元素内的所有文本。这不会考虑到 html。

考虑升级您的 jQuery 版本。 1.10.1 已经快 9 岁了。截至此评论，3.6.0 是最新的。

这段代码运行良好。但它将所有的 html 转换为 span。

【参考方案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;");

【讨论】：

非常感谢。它按我的意愿工作。你是宝石。

如果有人需要，我更新了 JS Fiddle。 jsfiddle.net/7ywohnqr

【参考方案2】：

必须对 html 进行一些细微的更改，即在不在标题或链接中的文本周围添加一个 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('')
  );
 )