<div>中一行文本的突出显示效果

debugcn 发表于 Dev

罗里克

我想重现这个小提琴中显示的效果

根据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困难得多，因为实际的文本属性不会更改。

我该如何完成？

亚历克斯·萨劳尤（Alex Salauyou）

看一看：

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();
    });
});