Добавление нескольких стилей к одному и тому же тексту с помощью jQuery

Проблема, которую вы описываете, интересна, но на самом деле довольно сложна для решения, поэтому я просто отвечу на ваши вопросы один за другим.

Это сам HTML, который я не могу понять. У кого-нибудь из вас есть идеи, как расположить эти SPAN один поверх другого?

span, которые являются дочерними элементами других спанов, будут автоматически индексироваться по z поверх своих родителей, поэтому html может выглядеть так:

<div class="container">
  <span>
    <span>
      Four <span>score</span> and seven
    </span> years ago
  </span>
  our fathers...
</div>

вы можете просто назначить дочерние промежутки разных стилей в вашем css (как вы знаете, добавляя для полноты):

.container span {..}
.container span > span {...}

Как указать jQuery, что при наведении курсора нужно пересчитывать слова вперед и назад и добавлять теги?

Эта часть очень сложная. Когда вы наводите курсор мыши на что-то в javascript, вы можете получить текст содержимого элемента и всевозможную информацию о позиции мыши.

Не имеет смысла пытаться вычислить ограничивающую рамку слова, поскольку каждый браузер и каждая ОС будут отображать текст по-разному, не говоря уже о том, что немоноширинные шрифты будут иметь разную ширину для каждого символа.

Теоретически было бы возможно использовать комбинацию карт и, возможно, вызвать щелчок (через API выбора), чтобы узнать, какое слово было под вашим курсором, но, вероятно, это не очень хорошо сработает с вашим пользовательским интерфейсом. Удачи!

Я работал над этой концепцией со вчерашнего дня и смог придумать предварительную рабочую скрипку - FIDDLE. .

Общая идея заключается в следующем:

1. Поместите все слова и связанные с ними дескрипторы в массив.

2. Отображать слова динамически.

3. Свяжите скрытые данные с каждым из слов, поскольку они отображаются динамически.

4. Когда вы наводите курсор на слово, связанные данные (дескрипторы на разных уровнях) отображаются там, где вы хотите.

JS

var mydata = [
              ['four', 'a number', 'four score = 80', 'total of 87 years'],
              ['score', 'a word', 'four score = 80', 'total of 87 years'],
              ['and', 'a word', '', 'total of 87 years'],
              ['seven', 'a number', '', 'total of 87 years'],
              ['years', 'a word', '', 'total of 87 years'],
              ['ago', 'a word', 'ago = in the past', '']
              ];

for(var v=0; v<6; v++)
   {
    $('.holder').append("<div class='num" + v + "'>" + mydata[v][0] + '-' + " </div>");
    $(".num" + v).data( 'dataval1', mydata[v][1] );
    $(".num" + v).data( 'dataval2', mydata[v][2] );
    $(".num" + v).data( 'dataval3', mydata[v][3] );
    }

$('.holder div').on('mouseenter', function(){
  $('.putmehere').html(
                        $( this ).data('dataval1') + "<br />" +
                        $( this ).data('dataval2') + "<br />" +
                        $( this ).data('dataval3') + "<br />"
  );
});
$('.holder div').on('mouseleave', function(){
  $('.putmehere').html('');
});