如何在<div>中实现单行文本的高亮效果

Question

我想要重新创造这个示例中展示的效果。

根据StackOverflow的规定，如果我链接到jsfiddle.net，我似乎必须呈现一些代码，所以这里是来自该链接的主要函数。虽然要看到效果，您显然必须跟随链接。

$(document).ready(function() {
  $(".textWrapper").hover(function() {
    $(".highlight", this).show();
    $(this).mousemove(function(e) {
      var relativePos = e.pageY - this.offsetTop;
      var textRow = (Math.ceil(relativePos / 18) * 18) - 18;
      if (textRow >= 0) { $(".highlight", this).css("top", textRow + "px"); }
    });
  }, function() {
    $(".highlight", this).hide();
  });
});

与其用黄色突出显示文本，我更喜欢改变文本本身的颜色。

我希望文本是浅灰色的，并且在被突出显示时变暗，以便将该行聚焦。这似乎比仅更改CSS要困难得多，因为实际的文本属性不会改变。

我该如何实现这一点？

- roryok

---

规则不仅仅是关于发布“一些代码”。您应该发布您编写的代码，以尝试解决您的问题。 - Cfreak

在你的小提琴代码中，有一个名为 highlight 的隐藏 div，它有一个黄色背景、绝对位置和与文本行相同的宽度。当鼠标悬停在一行上时，它会移动到悬停的行并变为可见状态，这就是高亮效果。 使用这种解决方案，你无法达到你的目标，因为你需要选取悬停行的文本，将其包装在 span 中并改变 span 的文本颜色... 这与获取光标位置并在该位置显示一个 '黄色' 方框不同 ;) - errand

@errand：说实话，发布的解决方案更简单、更高效 :) - aymericbeaumet

@aymericbeaumet：是的，没错。但需求似乎是改变悬停文本的颜色，而不是背景 - 所以这个问题没有“简单”的选项。虽然，我不确定自己是否能解决它。 - errand

我考虑将文本用span包围起来，但问题是，如何确定文本的起始和结束位置？更复杂的是，最终目标是一个contentEditable div，因此文本可能会发生变化。 - roryok

Answer 1

看一下：

http://jsfiddle.net/5nxr6my4/

使用相同的原理，我创建了两个白色不透明的 div，即 #highTop 和 #highBot，以便在鼠标指针悬停在文本上方时覆盖文本。它们的 height 和 top 属性根据指针位置进行调整，因此底层黑色文本看起来是灰色的，除了鼠标指针所在的那一行。

$(document).ready(function() {
    $('#highTop').css('height', $('.textWrapper').height()).show();

    $('.textWrapper').hover(function() {   
        $('#highBot').show();
        $(this).mousemove(function(e) {
           var relativePos = e.pageY - this.offsetTop;
           var textRow = (Math.ceil(relativePos / 18) * 18) - 18;
           if (textRow >= 0) { 
              // change height of #hightTop to make it cover upper part of text
              $('#highTop').css('height', textRow + 'px'); 
              // change position and height of #highBot to make it cover lower part of text
              $('#highBot').css('height', $('.textWrapper').height() - 18 - textRow + "px")
                           .css('top', textRow + 18 + 'px');
           }
        });
    }, function() {
        // when the pointer goes out of the text, hide #highBot and make #highTop cover entire text
        $('#highTop').css('height', $('.textWrapper').height() + 'px');
        $('#highBot').hide();
    });
});

- Alex Salauyou

---

谢谢 Sasha。这是一个开始，但我正在寻找相反的效果。高亮文本应该更暗。 - roryok

@SashaSalauyou：不错！ - aymericbeaumet

请在您的答案中包含相关代码。 - James Montagne

Answer 2

我做了一些研究，似乎唯一让这个变得可能的方式是将每行放入不同的HTML标签中。

之所以无法按您要求进行，原因是 .highlight div 不包含文本本身，因此只能应用覆盖而不能编辑底层文本。

这可能会有所帮助，请查看http://jsbin.com/ukaqu3/91 ，其中介绍了仅显示某些文本行的内容。

- Zak

---

将每行分割为单独的标签肯定会简化问题。然而，您需要在每次窗口调整大小时重写DOM。 - aymericbeaumet

这个问题更加复杂的是最终目标是一个可编辑的contentEditable div，因此文本会改变。 - roryok

JSBin的链接将是我们的起点...但我现在要离开了 ;) - errand