在鼠标悬停时突出显示文本行 [英] Highlight lines of text on mouseover

问题描述

我目前正在开发一个网站，该网站将提供一堆供人们阅读的故事（基本上是一个博客）。我想让他们尽可能容易阅读，我想通过光标突出显示文本行是有用的。在读书时，Kinda喜欢用手指按照文字行。

我偶然发现了，但是我似乎无法使它为我的页面工作，这是我最喜欢的方式。 。这也是一个很老的答案，所以也许有一个改进版本的这个？

如果任何人可以帮助我，我会永远感激！

解决方案

写了一些jQuery代码，至少对我来说，看起来和工作比你所指的帖子中的代码更好。希望它符合您的需求：

还有一个现场演示 http://jsfiddle.net/gFTrS/2/

HTML

 < div class =textWrapper> 
< div class =highlight>< / div> 
< p>您的文字在这里< / p> 
< / div> 
  

CSS

< pre class =lang-css prettyprint-override> .textWrapper
{
position：relative;
width：600px;
padding：0px 10px;
margin：0 auto;
cursor：default;
}

.textWrapper p
{
font：normal 12px Arial;
color：＃000000;
line-height：18px;
padding：0;
margin：0;
}

.highlight
{
position：absolute;
top：0;
left：0;
width：100％;
height：18px;
background：yellow;
z-index：-1;
display：none;
}


jQuery

  $（document）.ready（function（）
 {
 var lineHeight = 18; 
 
 $（'。textWrapper'）。hover（function（）
 {
 $（'。highlight'，this）.show（）; 
 
 （this）.mousemove（function（e）
 {
 var relativePos = e.pageY  -  this.offsetTop; 
 var textRow =（Math.ceil（relativePos / lineHeight）* lineHeight） lineHeight; 
 if（textRow => 0）
 {
 $（'。highlight'，this）.css（'top'，textRow +'px'）; 
 } 
}）; 
}，function（）
 {
 $（'。highlight'，this）.hide（）; 
}）; 
}）; 
  

I'm currently working on a website which will feature a bunch of stories for people to read (basically a blog). I want to make them as easy to read as possible and I figured it would be useful to 'highlight' lines of text with the cursor. Kinda like following the lines of text with your finger when reading a book.

I stumbled upon this answer, however I can't seem to get it to work for my page. It's also a pretty old answer so maybe there's an improved version of this?

If anyone could help me out I'd be forever grateful!

解决方案

Wrote some jQuery code that, atleast to me, both looks and works better than the code in the post that you are referring to. Hope it fits your needs :)

There's also a live demo up at http://jsfiddle.net/gFTrS/2/

HTML

<div class="textWrapper">
    <div class="highlight"></div>
    <p>Your text goes here</p>
</div>

CSS

.textWrapper
{
    position: relative;
    width: 600px;
    padding: 0px 10px;
    margin: 0 auto;
    cursor: default;
}

.textWrapper p
{
    font: normal 12px Arial;
    color: #000000;
    line-height: 18px;
    padding: 0;
    margin: 0;
}

.highlight
{
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 18px;
    background: yellow;
    z-index: -1;
    display: none;
}

jQuery

$(document).ready(function()
{
    var lineHeight = 18;

    $('.textWrapper').hover(function()
    {
        $('.highlight', this).show();

        $(this).mousemove(function(e)
        {
            var relativePos = e.pageY - this.offsetTop;
            var textRow = (Math.ceil(relativePos / lineHeight) * lineHeight) - lineHeight;
            if (textRow => 0)
            {
                $('.highlight', this).css('top', textRow + 'px');
            }
        });
    }, function()
    {
        $('.highlight', this).hide();
    });
});

这篇关于在鼠标悬停时突出显示文本行的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！