When hovering a CSS list item, change the parent items CSS

Question

I have a simple UL list, when you hover over the More list item in the HTML below, it unhides it's child menu and shows it.

What I need to do is change the CSS of the actual More's CSS once the child menu is show and hovered.

So if you hover over More a child menu becomes visible, you then hover over that child menu. At this point I need to change the CSS of the Parent of this child menu which would be the menu that has More as it's text.

If you know how to do this without Javascript, I would love to know.. Maybe it is not even possible without JS?

 <div id="nav-wrapper">
        <ul>

            <li><a href="">Link</a></li>

            <li><a href="">Link 5</a></li>

            <li><a href="">More</a>
                <ul>
                    <li><a href="">Sub Link 1</a></li>
                    <li><a href="">Sub Link 2</a></li>
                    <li><a href="">Sub Link 3</a></li>
                    <li><a href="">Sub Link 4</a></li>
                    <li><a href="">Sub Link 5</a></li>
                </ul>
            </li>

        </ul>
    </div>

The CSS

<style type="text/css" media="screen">
#nav-wrapper ul {
    position:relative;
    width: 700px;
    float: right;
    margin: 0;
    list-style-type: none;
}
#nav-wrapper ul li {
    vertical-align: middle;
    display: inline;
    margin: 0;
    color: black;
    list-style-type: none;
}
#nav-wrapper ul li a {
    text-decoration: none;
    white-space: nowrap;
    line-height: 45px;
    font-size: 13px;
    color: #666;
    padding: 5px 15px;
    -webkit-border-radius: 4px;
    -moz-border-radius: 4px;
    border-radius: 4px;
}
#nav-wrapper ul li a:hover {
    color: #fff;
    background-color: #4caef2;
}
#nav-wrapper ul li a:visited {
    color: #666;
}

/* Hide Sub-menus */
#nav-wrapper ul ul{
    display: none;
}
/* SHOW Sub-menus on HOVER */
#nav-wrapper ul li:hover ul{
    display: block;
    margin:-10px 0 0 0;
    padding:0px 20px 20px 20px;
    border-color:#fff;
    border:1px;
    border-style:solid;
    background:#FFF;
    position:absolute;

    top:45px;
    right: 320px;
    width: 420px;
}

</style>

score 31 · Accepted Answer · edited Nov 24 '13 at 17:32

Well, despite what these other answers say, here's kind of a sneaky way of going about it using the adjacent selector.

HTML:

<ul>
    <li>
        <ul>
            <li>Sub Link 1</li>
            <li>Sub Link 2</li>
            <li>Sub Link 3</li>
        </ul>
        <a href="#">Menu</a>
    </li>
</ul>

CSS:

* { 
    margin: 0; 
    padding: 0; }
ul { list-style: none; }
ul > li { position: relative; }
ul li a { 
    height: 16px;
    display: block; }
ul ul { 
    position: absolute;
    top: 16px;
    left: 0;
    cursor: pointer;
    display: none; }
ul li:hover ul { display: block; }
ul ul:hover + a { color: red; }

Preview: http://jsfiddle.net/Wexcode/YZtgL/

CherryFlavourPez · Answer 2 · 2015-05-12T11:18:39.920

6

Old question, and the accepted answer is clever. But this is pretty trivial to achieve, with just a single change in your CSS from:

#nav-wrapper ul li a:hover

to:

#nav-wrapper ul li:hover>a

This won't work in IE6 (that browser only understands hover styles on anchors). But then nor does the adjacent sibling combinator selector (+).

See this jsFiddle for the fix in action

edited May 12 '15 at 11:18

answered Aug 07 '13 at 12:11

CherryFlavourPez

6,807
4
42
47

This changes the child element, not the parent element – Joe's Ideas May 12 '15 at 09:51
@JoeLannen - yep, and this achieves exactly what OP asked for. There's no such thing as a parent selector, but by moving the CSS hover styles to the parent `li` like this you don't need one. – CherryFlavourPez May 12 '15 at 11:13
I know there's no parent selector, the question asked to change the parent's CSS. I see where you're going with your solution tho now. cheers – Joe's Ideas May 12 '15 at 16:19

score 3 · Answer 3 · answered Dec 24 '11 at 04:16

3

You can not select parent elements in CSS. You'll need javascript/jQuery to accomplish what you want.

CSS3 selectors...

answered Dec 24 '11 at 04:16

Scott

19,994
8
41
53

score 0 · Answer 4 · answered Nov 12 '17 at 21:31

0

The solution of @CherryFlavourPez above works. The reason why it works is not explained clearly though. Note that the li element (the one with the "More" text) is a parent of the submenu (the ul with the five li elements in it). The a element is a (adjacent) sibling of the submenu. So when you are hovering over the submenu you are actually still hovering over the parent li element as well.

answered Nov 12 '17 at 21:31

leoncc

197
2
6

It is still not possible though using only CSS to change the CSS of the parent from the child. – leoncc Nov 12 '17 at 21:40

score 0 · Answer 5 · edited May 23 '17 at 10:29

0

It is not possible to select the parent of an element using CSS. You will have to use JavaScript or JavaScript libraries such as jQuery to implement this.

This might help you. Complex CSS selector for parent of active child

edited May 23 '17 at 10:29

Community

1
1

answered Dec 24 '11 at 04:20

Virendra

2,480
3
21
36

score -1 · Answer 6 · edited May 07 '19 at 12:59

-1

You look here CSS selectors and I send an example for you have a nice day

.triggerDiv{
  display:none;
}
.child:hover ~.triggerDiv {
  display:block
}

<div class="main">
  <div class="parent">
    <div class="child">
      <p>Hello</p>
    </div>
    <div class="triggerDiv">
      <p>I'm Here</p>
    </div>
  </div>
</div>

edited May 07 '19 at 12:59

Miroslav Glamuzina

4,201
2
15
30

answered May 07 '19 at 11:44

Anıl Şahin

21
1

When hovering a CSS list item, change the parent items CSS

6 Answers6

Linked