如何突出显示最靠近鼠标的文本行? [英] How can I highlight the line of text that is closest to the mouse?
问题描述
我有一个很长的文本，我想为用户提供阅读帮助:应突出显示当前行.为方便起见，我将只使用鼠标的 Y 坐标(这样，鼠标指针就不会碍事).我有一个 id content 的大 DIV 填充整个宽度和一个小 DIV 的类 content 用于文本(参见此处的示例).
I have a long text and I'd like to offer the user a reading help: The current line should be highlighted. To make it easier, I'll just use the Y coordinate of the mouse (this way, the mouse pointer isn't going to get in the way). I have a big DIV with the id content which fills the whole width and a small DIV with the class content for the text (see here for an example).
我使用的是 jQuery 1.4.如何突出显示最接近当前鼠标位置的文本行?
I'm using jQuery 1.4. How can I highlight the line of text that is closest to the current mouse position?
推荐答案
不确定 jQuery 是否会在这里帮助你很多，但你可以看看 element.getClientRects 方法，记录在MSDN 和 MDC.更具体地说，MSDN 上的这个示例是排序类似于您想要实现的目标，使用巧妙的 z 索引 div 元素突出显示行，该元素位于 getClientRects() 返回的坐标处的文本后面.
Not sure if jQuery will help you out much here, but you could take a look at the element.getClientRects method, documented on MSDN and MDC. More specifically, this example at MSDN is sort of similar to what you want to achieve, highlighting lines using a cleverly z-indexed div element that goes behind the text at the co-ordinates returned by getClientRects().
您应该能够通过循环访问文档的 onmousemove 中返回的 TextRectangle 对象并检查鼠标光标的 y 值是否 > 顶部和 <;每个矩形的底部，并巧妙地将 z 索引的 div 移动到相同的位置/高度.
You should be able to achieve the same thing by looping through the TextRectangle objects returned in the document's onmousemove and checking to see if the y value of the mouse cursor is > the top and < the bottom of each rectangle and moving the cleverly z-indexed div to the same position/height.
当前主流浏览器都支持getClientRects().
All the current major browsers support getClientRects().
更新 - 在 Chrome、IE6/7/8、Firefox、Opera、Safari 中工作.我在其他浏览器中遇到的最初问题与需要 display: inline 的 DIV 相关.
再次更新 - 对于一些较新的问题，我不得不参考这个答案，所以我花时间更新它以重新计算窗口调整大小的行.看起来其他人也一直在玩，现在是修订版 15.
UPDATED - working in Chrome, IE6/7/8, Firefox, Opera, Safari. The initial problems I had in the other browsers were related to the DIV needing to be display: inline.
UPDATED AGAIN - I had to refer to this answer for some newer questions, so I took the time to update it to recalc the lines on window resize. It looks like others have been playing around too, it's now on revision 15.
这篇关于如何突出显示最靠近鼠标的文本行?的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！
