突出显示<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要困难得多，因为实际的文本属性不会改变。

我该如何做到这一点？

Answer 1

看一看：

http://jsfiddle.net/5nxr6my4/

使用相同的原理，我创建了2个白色不透明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();
    });
});

Answer 2

我做了一些研究，似乎唯一可行的方法是将每一行放在一个单独的HTML标签中。

你想要它的方式不可能的原因是.highlight div不包含文本本身，所以你只能应用叠加而不是编辑下面的文本。

查看http://jsbin.com/ukaqu3/91可能会有所帮助，它只显示某些文本行。