pure css on hover text change

Question

I have three divs when hovered changes the text right below them (This is Text A, This is Text B, This is Text C). The default active text is Text B.

I want to the color of div.b to change when I hover over div.c

I have this working for the hover over 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;
}

So, are you trying to get `.b` to not be red when you hover over `.c`? — Alex, Jul 11 '14 at 11:51
I understood he's trying to get `.b` not to be red when you hover `.b` — Brewal, Jul 11 '14 at 11:52
If so, that's easy. Just add `.b:hover` to the last selector set — Alex, Jul 11 '14 at 11:54
The problem is that `div.c:hover ~ div.b:not(.active)` will not work because `.c` is after `.b` in the DOM — Brewal, Jul 11 '14 at 11:57

score 2 · Answer 1 · answered Jul 11 '14 at 12:03

I think the reason this isn't working is because the adjacent selector in CSS will only target elements after the target element:

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.

Source CSS Tricks

score 0 · Answer 2 · edited May 23 '17 at 11:57

0

There is no previous sibling selector in CSS.

You should use javascript as a workaround if you do not have the choice (here with jQuery) :

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

With a simple css class :

.b.disabled {
    color: #000;
}

jsFiddle Demo

edited May 23 '17 at 11:57

Community

1
1

answered Jul 11 '14 at 12:14

Brewal

8,067
2
24
37

score 0 · Accepted Answer · answered Jul 11 '14 at 12:23

0

Here I am doing little trick to get closer to your requirement. I have added the following two new styles. Check the fiddle.

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

DEMO

answered Jul 11 '14 at 12:23

Suresh Ponnukalai

13,820
5
34
54

pure css on hover text change

3 Answers3