CODEWITHSUNDEEP
htmlcsshoveronhover
easd
easd

Reputation: 3

pure css on hover text change

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;
}

Upvotes: 0

Views: 658

Answers (3)

Suresh Ponnukalai
Suresh Ponnukalai

Reputation: 13998

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

Upvotes: 0

Brewal
Brewal

Reputation: 8199

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

Upvotes: 0

Alex
Alex

Reputation: 7374

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

Upvotes: 2

Related Questions