применять hover одновременно к другой части текста с помощью css

Question

Я ищу способ (CSS-), чтобы применить состояние зависания к части моего текста HTML, когда другая часть зависает, две части, разделяющие один и тот же CSS класс.

У меня есть куча текста в HTML, разделенная на слова. Каждое слово связано с классом CSS; два разных слова могут быть связаны с одним и тем же классом.

К примеру, если я беру три слова и два класса (CLASSA, ClassB),

word1, word3 -> classA 
word2 -> classB 

Напишет следующий HTML-код:

<span class=classA>word1</span> 
<span class=classB>word2</span> 
<span class=classA>word3</span> 

Моей проблему: Я хочу изменить появление группы слов, разделяющих один и тот же класс на мыши.

Я пробовал:

.classA { 
    color: red; 
    } 
.classA:hover { 
    color: blue; 
    } 

... но когда мышь проходит над "word1", "word1" подсвечивается, но не "word3", который разделяет один и тот же класс ("CLASSA").

Любая помощь будет оценена!

Answer 1

Короткий ответ NO, вы не можете сделать это с помощью CSS, за исключением случаев, если вы пойдете за решениями, которыми я поделился с вами ниже.

Используйте смежный селектор, чтобы применить :hover эффект одновременно

.classA:hover + .classB + .classA { 
    color: blue; 
} 

Demo

Но, к сожалению, это будет работать только если вы :hover первый элемент группы, так как вы не можете вернуться назад с помощью CSS , второй способ - использовать элемент оболочки, но опять же, это будет ограничено, если у вас есть только 2 комбинации классов, где вы хотите применить стили к одному типу класса.

.wrapper_class:hover .classA { 
    color: blue; 
} 

Demo 2

Answer 2

.classA:hover { 
    color: blue; 
} 

Этот код применяется только к элементам, имеющим class=classA и находятся под мышки .. я думаю, было бы проще использовать Javascript:

var span = document.getElementsByClassName('classA'); 
var i = 0; 
while(i < span.length){ 
    span[i].onmouseover = function change(){ 
     var i = 0; 
     while(i < span.length){ 
      span[i].style.color = 'blue'; 
      i++; 
     } 
    } 

    span[i].onmouseout = function change(){ 
     var i = 0; 
     while(i < span.length){ 
      span[i].style.color = 'red'; 
      i++; 
     } 
    } 

    i++; 
} 

http://jsfiddle.net/fa7d0/Bt8eN/1/