Question

我想要的是一个页面，其中部分文本包含在<div>标记中，并带有特定属性，如文本颜色：

<div style="color:#00FF00"> Lorem ipsum dolor sit amet,</div> consectetur adipisicing elit,

当用户将鼠标悬停在文本中的下一个单词上时，在这种情况下为'consectetur'，</div>标记会向右移动一个位置，以便内容现在看起来像这样：

<div style="color:#00FF00"> Lorem ipsum dolor sit amet, consectetur</div> adipisicing elit,

无法弄清楚我的生活如何做到这一点。有什么想法吗？

Answer 1

首先，请不要使用<div>标记。文字为display: inline，<div>为display: block，因此您将遇到各种问题。

如果我遇到这个问题，我会做的是将每个单词都包含在它自己的<span>标记中，这样你的标记就会像：

<p class="extendHilite">
  <span>Lorem </span><span>ipsum </span><span>dolor </span> <!-- and so on -->
</p>

然后使用Javascript或jQuery在段落中的所有onmouseover元素上侦听<span>事件。您的事件处理程序将确定已跨越的跨度，并将所有先前跨度的className设置为为文本提供背景颜色的样式。

您也可以使用文本范围和绝对定位来执行此操作，但这样做会更加困难。

Answer 2

我认为fiddle可以满足您的需求。

这非常特定于您的请求（即，假设页面上有一个div，并且一次只有第一个单词是鼠标悬停感知），但我认为您可以使用这个想法来获取您所追求的内容。顺便说一句，我使用与其他人一样的基本思想，用div标记包裹div之后的单词。

Answer 3

正如已经评论过的那样，在此上下文中使用内联元素<span>，而不是<div>。这不是一个完整的答案，而是对解决方案的贡献。看起来你需要一些能够识别句子中每个单词的javascript。在我看来，这是困难的部分。一旦你做到了，这将是一个简单的问题：

<span id="colored"> Lorem ipsum dolor sit amet,</span> consectetur adipisicing elit, ...

$('.singleWord').hover(function(){
    var word = " " + $(this); // want a space before the word, right?
    $(this).remove();
    word.appendTo('span#colored');
});

哦，是的，我总是忘记提到这个解决方案使用jQuery。 ;）

Answer 4

我已经设计了一种方法 - 代码可能会整理并缩小，但它可以正常工作。

这个想法是你有两个嵌套的span标签 - 一个用于已经突出显示的样式文本，另一个用于仅保存jQuery事件绑定序列中的下一个单词。

将所需的任何字符串放在_string变量中，然后离开。

<style type="text/css">
    html { font-size: 20pt; }
    .red { color: red; }
</style>
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.4.4/jquery.min.js"></script>
<script language="javascript" type="text/javascript">

var _highlightIndex = 0;
var _string = "Here is some test text to highlight";

$(document).ready(function()
{
    RenderSpan();
});

function BindEvents()
{
    $("#outer .nextword").mouseover(function()
    {
        RenderSpan();
    });
}

function RenderSpan()
{
    var array = _string.split(" ");
    // Use an array to store text to save repeated string concatenation
    var html = [];
    var i = 0;
    html[i++] = "<span class=\"red\">"
    // Add all elements that have already been turned red
    for (var j = 0; j < _highlightIndex; j++)
    {
        html[i++] = array[j];
        html[i++] = " ";
    }
    // Close the red span
    html[i++] = "</span>";
    // Add the next word in the sequence to its own span for the event to bind to
    html[i++] = "<span class=\"nextword\">";
    html[i++] = array[_highlightIndex];
    html[i++] = "</span>";
    html[i++] = " ";
    // Now add the remaining words with no span around them
    for (var k = _highlightIndex + 1; k < array.length; k++)
    {
        html[i++] = array[k];
        html[i++] = " ";
    }
    // Replace the html in the outer div
    $("#outer").html(html.join(""));
    // Increment the highlight index
    _highlightIndex++; // move this to the top of the function if you want to start with one red word
    // Re-bind the jQuery mouseover
    BindEvents();
}
</script>
<div id="outer"></div>

鼠标悬停时动态移动/ div标签

4 个答案: