在鼠標懸停上突出顯示文本行

我目前正在研究一個網站，該網站將包含大量供人閱讀的故事（基本上是一個博客）。我想讓它們儘可能容易閱讀，並且我認爲使用光標「突出顯示」文本行會很有用。有點像在閱讀書籍時用手指跟着文字的線條。在鼠標懸停上突出顯示文本行

我偶然發現this answer，但我似乎無法讓它爲我的網頁工作。這也是一個非常古老的答案，所以也許這是一個改進版本？

如果有人能幫助我，我會永遠感激！

來源

2012-08-16 Swen

jsbin上的例子看起來非常有效。你可以發佈你的代碼，以便我們可以看到爲什麼它不起作用？ – PJH 2012-08-16 20:15:13

更新：添加它。它應該只用於網站左側的文章（所以不是滑塊）。 http://www.s-hosting.nl/creepypastaindex/ – Swen 2012-08-16 20:18:45

寫了一些jQuery代碼，至少對我而言，兩者看起來都比代碼中的代碼更好您所指的帖子。希望它適合你的需求:)

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

來源

2012-08-16 20:39:12 Tom

我會試試這個，並報告它是否有效 – Swen 2012-08-16 20:41:33

你走了！這就是我的意思（未經測試）。快速腳本！ – 2012-08-16 20:42:42

好吧我試圖剛剛添加這個，但它似乎並沒有工作（我很可能做錯了什麼）你可以在這裏看到它：http://www.s-hosting.nl/creepypastaindex/（左下角的帖子） – Swen 2012-08-16 20:44:20

大多數關於SO的舊帖子中的答案和建議你都試圖通過爲每行添加跨度或div來操縱DOM。但實際上這不是一種防水的方法，因爲它不是跨瀏覽器兼容的，尤其是不適用於移動瀏覽器。你應該使用一個動態的jquery控制的div跳轉後面的行。該div應該動態定位，並帶有一個在mousemove上觸發的jquery函數，根據鼠標光標位置計算行高的div跳轉。

來源

2012-08-16 20:35:48

在鼠標懸停上突出顯示文本行

回答

相關問題