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

简短的回答是否，除非您选择我在下面与您分享的解决方案，否则您无法使用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/

使用css同时将hover应用于文本的不同部分

2 个答案: