Question

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

当我将鼠标悬停在div.b

时，我想改变div.c的颜色

我将此工作悬停在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 Tricks

Answer 2

CSS中的

There is no previous sibling selector。

如果您没有选择（这里使用jQuery），您应该使用javascript作为解决方法：

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

使用简单的css类：

.b.disabled {
    color: #000;
}

jsFiddle Demo

Answer 3

这里我正在做一些小技巧来接近你的要求。我添加了以下两种新样式。检查小提琴。

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

DEMO

悬停文本更改的纯CSS

3 个答案: