1

我正在寻找一种（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”）。

任何帮助，将不胜感激 ！

4

2 回答 2

2

简短的回答是否定的，除非您选择我在下面与您分享的解决方案，否则您不能仅使用 CSS 来做到这一点。

使用相邻选择器同时应用:hover效果

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

演示

但不幸的是，这仅在您:hover使用第一个组元素时才有效，因为您无法返回 CSS，第二种方法是使用包装器元素，但同样，如果您只有 2 个您想要的类组合，这将受到限制将样式应用于单一类型的类。

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

演示 2

于 2013-08-17T09:11:16.410 回答
2 
.classA:hover {
  color: blue;
}

此代码仅适用于具有class=classAAND 位于鼠标下方的元素。我认为使用 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/

于 2013-08-17T09:22:59.347 回答