add hover to two elements with shared selector if hovered of either or

Question

I don't believe I can use :parent or sibling, pseudo classes with this as they are neither. They are elements completely separate from one another. I'm wondering if it's possible to do this without any JS. Pure CSS only. Below is my markup.

    <ul id="onsix"><!-- first instance -->
        <li id="one" class="shov one"><a class="one" href="#">Lorem Ipsum.</a></li><br>
        <li id="two" class="shov two"><a class="one" href="#">Lorem Ipsum.</a></li><br>
        <li id="three" class="shov three"><a class="one" href="#">Lorem Ipsum.</a></li><br>
    </ul>

   <div class="twosix"><!-- second instance -->
        <div id="one2" class="over shov one"></div>
        <div id="two2" class="over shov two"></div>
        <div id="three2" class="over shov three"></div>
    </div>

Basically I would like to add a hover effect to both instances with the class="one" when either instance of class one is hovered. Thus far I have tried sibling psuedo class with no success.

So, essentially these two elements.

        <li id="one" class="shov one"><a class="one" href="#">Lorem Ipsum.</a></li><br>

and

        <div id="one2" class="over shov one"></div>

Can you add the information over which element you exactly want to hover and what elements should get the class (in your example)? — ScientiaEtVeritas, Aug 22 '16 at 18:41
In your `id=onsix` all of the anchors have the same class `` — is that intentional, or a typo? Also to clarify — if you hover over `
` and get the hover effect, you _also_ want `
It is, essentially a dupe of the "parent selector" question. This is not possible with CSS as CSS cannot affect element UP the DOM. Javascript would be required. — Paulie_D, Aug 22 '16 at 20:04

score 2 · Accepted Answer · answered Aug 22 '16 at 19:08

To do this without javascript you would need a selector that describes a chain like
.one:parent—sibling—child.one

However, there is still no parent selector in CSS3, so no, you can't do this without javascript.

There are things such as EQCSS which has a $parent "selector", but that requires javascript itself.

Murph_Fish · Answer 2 · 2016-08-22T18:45:20.590

1

I think you are looking for the starts with tag.

li [id^="one"]:hover

[ ] begins and closes your containing condition id is to specify that we are looking for an id you can also use class ^ specifies starts with other options include $ ends with, * contains string
"one" the condition we are passing.

edited Aug 22 '16 at 18:45

answered Aug 22 '16 at 18:39

Murph_Fish

279
2
17

Thanks, this is cool, however doesn't work. Updated my question for accuracy. – Dr Upvote Aug 22 '16 at 19:04

add hover to two elements with shared selector if hovered of either or

2 Answers2