html - 悬停文本更改的纯CSS

Question

我有三个 div，悬停时会更改它们正下方的文本(这是文本 A，这是文本 B，这是文本 C)。默认事件文本是文本 B。

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

我在 div.a:hover 上悬停时使用此功能

---

Fiddle

---

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 中的相邻选择器将只定位目标元素之后的元素:

The general sibling combinator selector is very similar to the adjacent sibling combinator selector we just looked at. The difference is that that the element being selected doesn't need immediately succeed the first element, but can appear anywhere after it.

来源CSS Tricks