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

关键词：

【中文标题】在鼠标悬停时突出显示包含链接和标题的文本块的单个字符【英文标题】：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('')
  );
 )

【讨论】：

鼠标悬停时突出显示的单词

】鼠标悬停时突出显示的单词【英文标题】：Wordshighlightonmouseover【发布时间】：2014-01-0105:44:58【问题描述】：你知道高亮单词和添加鼠标悬停事件的最有效方法吗？我有文本，我想制作某种单词解释字段，所以当用户将光标放... 查看详情

鼠标悬停时突出显示的单词

】鼠标悬停时突出显示的单词【英文标题】：Wordshighlightonmouseover【发布时间】：2014-01-0105:44:58【问题描述】：你知道高亮单词和添加鼠标悬停事件的最有效方法吗？我有文本，我想制作某种单词解释字段，所以当用户将光标放... 查看详情

如何在鼠标悬停时突出显示图像地图的某些部分？

】如何在鼠标悬停时突出显示图像地图的某些部分？【英文标题】：HowdoIhighlightpartsofanimagemaponmouseover?【发布时间】：2010-11-1502:56:13【问题描述】：我需要显示一个包含大约70个区域的图像地图。鼠标光标当前所在的图像映射区... 查看详情

悬停时，突出显示 div 和所有其他具有相同文本的 div

...述】：我无法理解这个！请帮忙！我想要做的是，当我将鼠标悬停在一个div类上时，我希望该div的背景发生变化，但我也希望该类的所有其他div更改背景颜色，如果它们具有相同的文本值。例如：约翰被提及3次，刘易斯被提及... 查看详情

在悬停时将文本链接转换为图像

...个文本链接的网站。我正在努力做到这一点，因此当我将鼠标悬停在文本链接上时，会显示一个特定的图像。我已经能够将鼠标悬停在文本上并更改其颜色。但我不知道如何让每个链接悬停在不同的图像上。<!DOCTYPEhtml><hea... 查看详情

Vuetify - 鼠标悬停时下拉菜单不突出显示

】Vuetify-鼠标悬停时下拉菜单不突出显示【英文标题】：Vuetify-Dropdownmenudoesn\'thighlightonmouseover【发布时间】：2019-12-2618:08:20【问题描述】：我在Vuetify中创建了一个下拉菜单，但是虽然它可以工作，但当我将鼠标移过它们时，它并... 查看详情

将鼠标悬停在图像链接上时显示文本

】将鼠标悬停在图像链接上时显示文本【英文标题】：ShowingTextWhenHoveringOveranImageLink【发布时间】：2013-08-2720:04:16【问题描述】：我已经看过这里(Howtoshowtextonimagewhenhovering?)以找到解决此问题的方法，但它不能100%起作用...因为该... 查看详情

防止悬停改变链接的高度

】防止悬停改变链接的高度【英文标题】：Preventhoverfromchanginglink\'sheight【发布时间】：2019-05-0610:40:55【问题描述】：使用Angular、AngularMaterial和AngularFlex-Layout，我创建了一组样式类似于卡片或图块的链接。当链接未悬停时，将显... 查看详情

悬停时突出显示整个表格行

】悬停时突出显示整个表格行【英文标题】：Highlightentiretablerowonhover【发布时间】：2018-01-0708:52:29【问题描述】：我有一个表格，当它悬停在上面时，我想突出显示整行，并且整行可以作为链接点击。现在，当您在文本区域内时... 查看详情

鼠标悬停后如何突出显示字符？

】鼠标悬停后如何突出显示字符？【英文标题】：Howtohighlightcharactersaftermousehover?【发布时间】：2020-10-1603:47:01【问题描述】：我正在尝试在CSS中创建这种效果。到目前为止，我只能以相反的顺序获得这种效果。这意味着当我将... 查看详情

页面加载时菜单边框和图像突出显示

...单，其中第一个链接在页面加载时以边框底部突出显示。鼠标悬停在菜单中的每个链接上时，都有一个图像跟随。现在我已经设法让页面加载时的边框底部工作，但我也想显示第一张图片。我的jQuery技能非常有限，所以我认为总... 查看详情

当鼠标悬停在项目上或项目之间时，显示不同颜色的拖放突出显示

】当鼠标悬停在项目上或项目之间时，显示不同颜色的拖放突出显示【英文标题】：Showdifferentcolorofdraganddrophighlightwhenmouseisoverorbetweenitems【发布时间】：2018-06-0514:06:35【问题描述】：在我的ProxyStyle类中，我有一个drawPrimitive函数... 查看详情

在鼠标悬停时将文本悬停在帖子图像上

】在鼠标悬停时将文本悬停在帖子图像上【英文标题】：Hovertextoverpostimageonmouseover【发布时间】：2015-08-0619:36:07【问题描述】：我正在使用Genesis框架在wordpress中重新设计博客。这可能是有史以来最简单的事情，但我找不到一个... 查看详情

在任何背景上突出显示图像（悬停时）

...nybackground【发布时间】：2014-06-2113:40:01【问题描述】：当鼠标指针悬停在某些图像上时，希望点亮某些图像（增加亮度）是很常见的。我知道的一种适用于白色背景的技术是减少悬停时的不透明度，这实际上通过让更多的白色通... 查看详情

如何在悬停时更改文本框内容

...框。我的主要目标是让链接始终位于同一个位置，当您将鼠标悬停在它们上方时，下方的文本框将显示正确的 查看详情

在悬停时更改文本并替换为原始文本

...文本将显示“关闭”，反之亦然。但是，我不知道如何在鼠标移出时将链接文本返回到其原始值（例如，在examplejsFiddle中，文本在未悬停时应更改回Hell 查看详情

仅在文本链接悬停 CSS 上显示图像

...2-06-0121:33:09【问题描述】：我有一个文本链接。当用户将鼠标悬停在文本链接上时，我希望在页面的其他位置显示图像。我想用css做到这一点。我认为这可以通过链接中的一行代码（如鼠标悬停）来完成，但似乎需要页面上其他... 查看详情

如何在鼠标悬停 QML 上突出显示图像

】如何在鼠标悬停QML上突出显示图像【英文标题】：HowtohighlightimageonmousehooverQML【发布时间】：2021-09-1310:51:02【问题描述】：我是QML的新手，我正在尝试突出显示鼠标悬停上的图像。我有一排电影图像，像这样：这是我的图像编... 查看详情