鼠标悬停在javascript上时更改字符颜色_Javascript_Jquery_Css

鼠标悬停在javascript上时更改字符颜色

javascript jquery css

鼠标悬停在javascript上时更改字符颜色,javascript,jquery,css,Javascript,Jquery,Css,我试图突出显示鼠标悬停的角色（更改背景色）如何使用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 just

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

如何使用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>

Lorem ipsum door sit amet，consetetur sadipscing eliter，
在实验室和实验室的临时检查中，
塞德·迪亚姆·沃卢普塔。在vero eos和accusam以及justo duo dolores和ea Reum。
斯泰特·克莱塔·卡斯德·古伯格伦（Stet clita kasd gubergren），没有海洋，也没有海洋

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

除非您先将整个字符串拆分为

s，否则很难找到已悬停的字符，如下所示

页面中的HTML：

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

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

<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>


p#源范围：悬停
{
背景色：红色；
}
window.onload=函数（）{
变量i、tx、html、节点；
node=document.getElementById（“源”）；
tx=node.innerHTML；
html=“”；
对于（i=0；i这是一个示例文本

您可以将段落拆分为多个字符。然后将每个字符映射到包含该字符的范围，然后将这些元素附加到空段落。给每个跨度一个CSS

：悬停

块：

jQuery

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

如果要省略空白，请使用If语句测试

trim

ing后的值长度：

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

$cont=$（'p'）；
parts=$.map（$（'p'）.text（）.split（''），函数（v）{
返回$.trim（v）.length？$（''，{text:v}）：''；
});
$cont.empty（）.append（部分）；

我也要把我的解决方案扔进拳击场。：）它还涉及将

标记环绕每个字符（不过，仅限于非空白字符…没有必要将不可见的字符转换为不同的颜色；）：

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>

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


$（文档）.ready（函数（）{
var$higlightSection=$（“p”）；
$higlightSection.html（$higlightSection.text（）.replace（/（\S）/g，“$1”）；
$higlightSection.find（“span”）.on（“悬停”，函数（）{
$（this.toggleClass（“突出显示”）；
});
});

CSS:

<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>

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


p{cursor:default；}
.突出显示{颜色：红色；}

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

纯JavaScript或jQuery？两者都有标记，因此两者都可以。您可能可以跳过在任何空白字符周围添加跨距。；）我最关心的是关于如何实现效果和显示易于逐行阅读的代码作为概念证明的解释。显然，您现在可以将其拒绝到任何您想要的框架中，jQuery不是世界上唯一的框架，您知道：）这是我最喜欢的解决方案+1，切换类的想法非常方便

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