Динамическое перемещение тега / div при наведении мыши

Question

Я хочу, чтобы была страница, где часть текста заключена в тег <div> с определенным атрибутом, например, цвет текста:

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

Когда пользователь наводит курсор на следующее словов тексте, в данном случае «consectetur», тег </div> переместился бы на одно место вправо, так что содержимое теперь выглядит так:как это сделатьЕсть идеи?

Answer 1

Я думаю, что скрипка делает то, что вы хотите.

Это довольно специфично для вашего запроса (т. Е. Предполагается, что один div на странице и только первое слово распознается при наведении мыши навремя), но я думаю, что вы можете использовать эту идею, чтобы получить то, что вы ищете.Кстати, я использую ту же основную идею, что и другие, - заключать слова после div в теги span.

Answer 2

Прежде всего, не используйте для этого тег <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 3

Я разработал один способ сделать это - код, вероятно, можно было бы привести в порядок и сжать, но он работает.

Идея состоит в том, что у вас есть два вложенных тега 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>

Answer 4

Как уже отмечалось, используйте встроенный элемент <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.;)