0

当悬停时，我有三个divs 会更改它们正下方的文本（这是文本 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;
}
4

3 回答 3

2

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

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

源CSS 技巧

于 2014-07-11T12:03:55.110 回答
0

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

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

演示

于 2014-07-11T12:23:41.120 回答
0

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

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

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

使用一个简单的 css 类：

.b.disabled {
    color: #000;
}

jsFiddle 演示

于 2014-07-11T12:14:35.837 回答