Hovering and changing div lower down in DOM with css only?

Question

If I have tabs like this in html:

<ul class="qtabs">
    <li><a href="{show tab1}">tab 1 title</a></li>
    <li class="active"><a href="{show tab2}">tab 2 title</a></li>
    <li><a href="{show tab3}">tab 3 title</a></li>
</ul>

<div class="tab-container">

    <div id="tab1">
        <div class="tab-content">text, text, text, text....</div>
    </div>

    <div id="tab2" style="display:none;">
        <div class="tab-content">text, text, text, text....</div>
    </div>

    <div id="tab2" style="display:none;">
        <div class="tab-content">text, text, text, text....</div>
    </div>

</div>

Is it possible with CSS only to make hover-effect (change textcolor of .tab-content for the tab that user is hovering over ? (it's ok if it only works with css3)

Possible duplciate? Is there any way to hover over one element and affect a different element?

Kind of, but nothing has happened in 4 years then? :-)

I don't think you can with an HTML structure like yours. You could if you had [descendant or adjacent elements](http://stackoverflow.com/questions/6867257/is-there-any-way-to-hover-over-one-element-and-affect-a-different-element) — musefan, Sep 16 '15 at 12:31
Can you please clarify? Are you trying to change the colour of `tab-content` when you hover the appropriate `li` in `qtabs` or change the colour of `tab-content` when you hover the `#tab1` — wf4, Sep 16 '15 at 12:38
Clarification: I want to change change the colour of tab-content when I hover the appropriate li in qtabs — bestprogrammerintheworld, Sep 16 '15 at 12:43
I think this is the closest you can get https://jsfiddle.net/0kn15mdc/ based on @musefan s answer and https://stackoverflow.com/questions/6910049/on-a-css-hover-event-can-i-change-another-divs-styling — forgetso, Sep 16 '15 at 12:49
@forgetso: Nice idea! [this takes it a step further](https://jsfiddle.net/0kn15mdc/1/) — musefan, Sep 16 '15 at 12:57

musefan · Accepted Answer · 2015-09-16T13:08:37.027

You can't get exactly what you want unfortunately, but perhaps this is close enough for what you need.

If you allow the hover to work on .qtabs instead of each individually li. Then you can use a combination of the sibling selector and the standard descendant selector to meet your needs:

.qtabs:hover ~ .tab-container .tab-content {
    color:red;
}

Here is a working example

The benefit of this approach is that it requires no changes to your existing HTML structure, and without JavaScript which I assume you are trying to avoid for whatever reason.

Need each tab page to have a different colour?

Then why not try our new and improved version

This is close enough I think. Thanks a lot! :-) – bestprogrammerintheworld Sep 16 '15 at 13:26 — bestprogrammerintheworld, Sep 16 '15 at 13:26

score 1 · Answer 2 · answered Sep 16 '15 at 13:00

The problem is that you need to check the children of ul to see which is active and then reverse back up the DOM to get to tab-content. This is how you could write that rule...

ul li.active:hover  + .tab-container #tab1 .tab-content {color:#f00;}

HOWEVER it is not currently possible to do this in CSS. This behaviour is frequently requested and is more commonly known as a "parent selector" however, .

If you can change your markup and maybe include something on the ul which will enable you to identify the tab then you could do something like this:

ul.activeTab1:hover + .tab-container #tab1 .tab-content {color:#f00;}
ul.activeTab2:hover + .tab-container #tab2 .tab-content {color:#f00;}

which would be almost what I think you are after..

http://jsfiddle.net/qdgtx4jc/

Hovering and changing div lower down in DOM with css only?

2 Answers2