Question

我试图突出显示（更改背景颜色）鼠标悬停在其上的角色。

我怎么能用JavaScript做到这一点？

它应该生成与此类似的代码

<p>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.
Stet clita kasd gubergren, no sea takimata sanctus <span id='highlight'>e</span> Lorem     ipsum dolor sit amet.</p>

Answer 1

编辑：OP要求使用Javascript，并没有明确提及jQuery。这是一个概念证明，展示了如何获得这种效果，并具有解释效果的主要任务。一旦理解，就可以很容易地在jQuery中实现更少的代码。

除非你先将整个字符串分成<span>，否则找到已经悬停的字符是很棘手的。

页面中的

HTML：

<p id="source">This is an example text.</p>

页面中的

JS：

var i, tx, html, node;

node = document.getElementById("source");
tx = node.innerHTML;

html = "";
for (i = 0; i < tx.length; i++)
{
  html += "<span>" + tx.charAt(i) + "</span>";
}

node.innerHTML = html;

接下来，在CSS中定义：

p#source span:hover
{
  background-color: red;
}

以下是完整的工作示例页面：

<html>
  <head>
    <style>
      p#source span:hover
      {
        background-color: red;
      }
    </style>
    <script>
      window.onload = function () {
        var i, tx, html, node;

        node = document.getElementById("source");
        tx = node.innerHTML;

        html = "";
        for (i = 0; i < tx.length; i++)
        {
          html += "<span>" + tx.charAt(i) + "</span>";
        }

        node.innerHTML = html;
      };
    </script>
  </head>
  <body>
    <p id="source">This is an example text.</p>
  </body>
</html>

Answer 2

您可以将段落拆分为字符。然后将每个字符映射到包含该字符的范围，然后将这些元素附加到清空的段落中。为每个范围提供一个CSS :hover块：

<强>的jQuery

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

<强> CSS

p span:hover{background:#F00}

JSFiddle

如果你想省略空格，请使用if语句测试trim之后的值的长度：

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

JSFiddle

Answer 3

也要把我的解决方案扔进戒指。 :)它还涉及为每个字符包装<span>标签（但是，只有非空白字符......没有必要将不可见的字符变成不同的颜色;））:( / p>

<强> jQuery的：

<script type="text/javascript">
    $(document).ready(function() {
        var $higlightSection = $("p");

        $higlightSection.html($higlightSection.text().replace(/(\S)/g, "<span>$1</span>"));

        $higlightSection.find("span").on("hover", function() {
            $(this).toggleClass("highlight");
        });
    });
</script>

<强> CSS：

<style>
    p {cursor: default;}
    .highlight {color: red;}
</style>

编辑：我更新了解决方案中的代码，以匹配您提供的示例HTML。

鼠标悬停javascript时改变字符的颜色

3 个答案: