Можно обрабатывать весь HTML-код перед наведением курсора и размещением некоторых интервалов и т. Д.
Вам, безусловно, придется это сделать, поскольку вы не можете стилизовать текстовые узлы, только элементы.
Вот функция, которую вы можете использовать, чтобы сделать это из скрипта. (К сожалению, jQuery здесь мало используется, поскольку он не любит обработку текстовых узлов.)
// Wrap Text nodes in a new element of given tagname, when their
// parents contain a mixture of text and element content. Ignore
// whitespace nodes.
//
function wrapMixedContentText(el, tag) {
var elementcontent= false;
for (var i= el.childNodes.length; i-->0;) {
var child= el.childNodes[i];
if (child.nodeType===1) {
elementcontent= true;
wrapMixedContentText(child, tag);
}
}
if (elementcontent) {
for (var i= el.childNodes.length; i-->0;) {
var child= el.childNodes[i];
if (child.nodeType===3 && !child.data.match('^\\s*$')) {
var wrap= document.createElement(tag);
el.replaceChild(wrap, child);
wrap.appendChild(child);
}
}
}
}
А вот некоторые функции, которые вы можете использовать для выбора узлов между другими узлами. (Опять же, jQuery в настоящее время не имеет функции для этого.)
// Get array of outermost elements that are, in document order,
// between the two argument nodes (exclusively).
//
function getElementsBetweenTree(start, end) {
var ancestor= getCommonAncestor(start, end);
var before= [];
while (start.parentNode!==ancestor) {
var el= start;
while (el.nextSibling)
before.push(el= el.nextSibling);
start= start.parentNode;
}
var after= [];
while (end.parentNode!==ancestor) {
var el= end;
while (el.previousSibling)
after.push(el= el.previousSibling);
end= end.parentNode;
}
after.reverse();
while ((start= start.nextSibling)!==end)
before.push(start);
return before.concat(after);
}
// Get the innermost element that is an ancestor of two nodes.
//
function getCommonAncestor(a, b) {
var parents= $(a).parents().andSelf();
while (b) {
var ix= parents.index(b);
if (ix!==-1)
return b;
b= b.parentNode;
}
return null;
}
Возможное использование:
var outer= document.getElementById('myhighlightingimagesdiv');
wrapMixedContentText(outer, 'span');
var ps= $('#myhighlightingimagesdiv .p');
ps.each(function(pi) {
// Go up to the next image in the list, or for the last image, up
// to the end of the outer wrapper div. (There must be a node
// after the div for this to work.)
//
var end= pi===ps.length-1? outer.nextSibling : ps[pi+1];
var tweens= $(getElementsBetweenTree(this, end));
$(this).hover(function() {
tweens.addClass('highlight');
}, function() {
tweens.removeClass('highlight');
});
});