Как избежать перекрытия тегов HTML для выделения текста

Question

В приведенном ниже коде у меня есть три текста наведения и мир «привет». Первые две выделенные части «привет», и я хочу, чтобы третий выделил все «привет». Обертывание всех первых двух пролетов в третьем пролете не работает, и я понимаю, почему. Я знаю, что я не могу перекрывать теги HTML, и я не знаю, является ли вложение решением.

Как бы вы настроили это так, чтобы третий зависал?

http://jsfiddle.net/CAWhP/3/

Вот HTML:

<div id="test1"> highlight hel in hello</div> 

<div id="test2"> highlight lo in hello</div> 

<div id="test3"> highlight all of hello</div> 

<span class="testspan1"> hel</span><span class="testspan2">lo </span> 

Вот CSS:

#test1:hover ~ .testspan1{ 

    background: red; 
} 

#test2:hover ~ .testspan2{ 

    background: red; 
} 
#test3:hover ~ .testspan3{ 

    background: red; 
} 

Answer 1

Выберите соответствующий элемент

#test3:hover ~ span{ 
    background: red; 
} 

Demo

Или же вы можете также использовать этот

#test3:hover ~ span.testspan1, #test3:hover ~ span.testspan2 { 
    background: red; 
} 

Demo 2

Answer 2

Вот обходной путь: JSFiddle

#test3:hover ~ .testspan1 { 

background: red; 

} 

#test3:hover ~ .testspan2 { 

background: red; 

} 

Вы также можете разделить классы запятыми, например #test3:hover ~ .testspan1, #test3:hover ~ .testspan2. Это будет работать, если вы хотите, чтобы оба пролета имели одинаковый стиль.

Answer 3

Не знаю, почему вы хотите сделать это, но решить проблему, я думаю, вы могли бы это сделать:

#test3:hover ~ .testspan1, 
#test3:hover ~ .testspan2 { 
    background: red; 
} 

Полная и сокращенная версия:

Поскольку все правила применять те же свойства, вы можете сократить свой полный CSS к этому:

#test1:hover ~ .testspan1, 
#test2:hover ~ .testspan2, 
#test3:hover ~ .testspan1, 
#test3:hover ~ .testspan2 
{ 
    background: red; 
} 

Working example