悬停文本更改上的纯CSS

Question

悬停时，我有三个div更改它们下面的文本（这是文本A，这是文本B，这是文本C）。 默认的活动文本是文本B。

当我将鼠标悬停在div.c时，我想更改div.b的颜色

我在div.a:hover

---

小提琴

---

的HTML

<div class="onHoverText">
<div class="a">Text A</div>
<div class="b">Text B</div>
<div class="c">Text C</div>
<div class="outputBox">
    <span>This is Text B</span></div>
</div>

的CSS

.onHoverText {
    cursor: pointer;
}
.a, .b, .c {
    display: inline-block;
    margin-right: 3%;
    font-size: 15px;
}
.b {
    color: #FF0004;
    border-right: thin dashed #3A3A3A;
    border-left: thin dashed #3A3A3A;
    padding: 0 2%;
}
.a:hover, .c:hover {
    color: #FF0004;
}
.outputBox {
    font-size: 36px;
}
div.a:hover ~ div.outputBox span, div.c:hover ~ div.outputBox span {
    display: none;
}
div.a:hover ~ div.outputBox:after {
    content:' This is Text A';
}
div.c:hover ~ div.outputBox:after {
    content:' This is Text C';
}
div.a:hover ~ div.b:not(.active), div.c:hover ~ div.b:not(.active) {
    color: #000;
}

Answer 1

我认为这不起作用的原因是因为CSS中的相邻选择器仅将目标元素之后的目标元素作为目标：

通用的同级组合器选择器与我们刚刚看过的相邻同级组合器选择器非常相似。 不同之处在于，被选择的元素不需要立即在第一个元素之后，而是可以出现在它之后的任何位置。

源CSS技巧

Answer 2

CSS中没有以前的兄弟选择器 。

如果您没有选择（此处为jQuery），则应使用javascript作为解决方法：

$('.a, .c').hover(function(){
    $('.b').toggleClass('disabled');
});

使用简单的CSS类：

.b.disabled {
    color: #000;
}

jsFiddle演示

Answer 3

在这里，我没有什么技巧可以接近您的要求。 我添加了以下两种新样式。 检查小提琴。

.onHoverText:hover .b{color:#000;}
.b:hover{color:#FF0004 !important}

演示