hover on parent element with css

Question

I was wondering if there is a way you can apply a hover effect on parent element with just css. For example, I have a navigation:

<nav>
<ul>
    <a href="#"><li id="firstLiElement" class="main-nav ieraksti">ieraksti!</li></a>
        <ul id="audio_sub_menu">
            <li class="mes">mēs 1</li>
            <li id="klienti">mēs 2</li>
        </ul>
    <a href="#"><li class="main-nav" id="audio">paklausies!</li></a>
    <a href="#"><li class="main-nav" id="video">paskaties!</li></a>
    <a href="#"><li class="main-nav" id="kontakti">pasūti!</li></a>
</ul>
</nav>`

And what I want is to, when hovered on nav ul ul li element, it affects the #firstLiElement . I know it can be done with JS, but there has to be also a way to do this with css. I found a lot of solutions when you need to affect the sibling or child, but didn't find anything for this situation.

EDIT:

Sorry, didn't even write what I was looking for... Yes, sub_menus are hidden, but when I hover the main navigation li element, they shove up, and they stay visible also when I hover on them. What I am missing is to change the background color of the main navigation li element when the sub menu is hovered.

There is [**no parent selector**](http://stackoverflow.com/questions/1014861/is-there-a-css-parent-selector) in CSS — Paulie_D, Jul 07 '15 at 10:53

score 0 · Answer 1 · answered Jul 07 '15 at 11:06

I found this for you.

a < img { border: none; }

In this example, it would select a tags but only if they contained an img tag. (Aside: this would be a weird departure from the typical syntax where the actual elements being selected are on the right, this would be on the left).

a img:parent { background: none; }

The key difference being that the :parent syntax would only evaluate a single element, the parentNode available in the DOM for every element. This would be similar to forcing the :has selector to only evaluate children rather than all descendants.

https://css-tricks.com/parent-selectors-in-css/

PedroMendes · Answer 2 · 2015-07-07T11:35:05.677

I believe it can't be done. CSS or Cascade Style Sheet - keyword here is Cascade - executes in a cascade direction and not the other way around.

You can do this (assuming the audio_sub_menu, i.e., is hidden):

nav ul a:hover ul {
    visibility: visible;
}

And you'll be targeting a child on its parent hover. So, you can either change your layout and design to use this knowledge, or go with the JS solution :)

edit

to get the same color, style the :hover on the parent as well and change the first </a> in your HTML code

<nav>
    <ul>
        <a href="#"><li id="firstLiElement" class="main-nav ieraksti">ieraksti!</li>
            <ul id="audio_sub_menu">
                <li class="mes">mēs 1</li>
                <li id="klienti">mēs 2</li>
            </ul>
        </a>
        <a href="#"><li class="main-nav" id="audio">paklausies!</li></a>
        <a href="#"><li class="main-nav" id="video">paskaties!</li></a>
        <a href="#"><li class="main-nav" id="kontakti">pasūti!</li></a>
    </ul>
</nav>

And the CSS

nav ul a:hover {
    background-color: your_color;
}

nav ul a:hover ul {
    visibility: visible;
    background-color: your_color;
}

edit - On the hetasbo's answer

those are suggested css selectors, they don't exist

Sorry, didn't even write what I was looking for... Yes, sub_menus are hidden, but when i hover the main navigation li element, they shove up, and they stay visible also when I hover on them. What I am missing is to change the background color of the main navigation li element when the sub menu is hovered. — Oskars, Jul 07 '15 at 11:19
I have edited my answer. Have you checked if it works for you? ;) — PedroMendes, Jul 07 '15 at 12:16
I was looking for something a bit different, I want to change the color of main navigation ( nav ul a ) when I hover on the sub-menu li element ( nav ul ul li ) — Oskars, Jul 07 '15 at 12:49

hover on parent element with css

2 Answers2