On child hover change the css of Parent

Question

I want to change the css of parent on hover of Child element.

<ul id="main-menu">
        <li>
            <a href="#">
                <i class="fa fa-building-o" aria-hidden="true"></i>
                Private Limited
                <i class="fa fa-caret-down"></i>
            </a>
            <ul class="submenu">
                <li><a href="#0">Company</a></li>
                <li><a href="#0">Contact</a></li>
                <li><a href="#0">Industry</a></li>
            </ul>
        </li></ ul>

What i want is if i hover on li of submenu, li of main-menu get highlighted.

Possible duplicate of [Is there a CSS parent selector?](http://stackoverflow.com/questions/1014861/is-there-a-css-parent-selector) — Mr_Green, Jun 22 '16 at 05:59
You can do it with CSS. I have before. But I can tell you right now it will make it so much easier on you if you implement JavaScript. — GROVER., Jun 22 '16 at 06:01
I suggested that it is not possible with css. go with JavaScript. — Mr_Green, Jun 22 '16 at 06:01
@Mr_Green it is, you just have to use a class selector :-) It just won't work EXACTLY the way you want it to... — GROVER., Jun 22 '16 at 06:01
@CaelanGrgurovic I don't know how you will do that. I highly doubt we can cover all cases using just css though. Anyway, happy to learn if you know that. please share. — Mr_Green, Jun 22 '16 at 06:03
@Mr_Green yeah nah, there are a lot of restrictions from using just CSS. But it is possible to get some sort of an effect with just CSS. — GROVER., Jun 22 '16 at 06:04
@WebStarter explain what exactly you want. there might be workaround. — Mr_Green, Jun 22 '16 at 06:05
@Mr_Green : I m using this for navigation menu, where i have to highlight main menu on hover of child submenu. — WebStarter, Jun 22 '16 at 06:52
There is no parent selector, but you are already hovering over the parent element while hovering over the child. Use that fact to achive what you want — Jon P, Jun 22 '16 at 07:17

score 30 · Accepted Answer · edited Aug 25 '20 at 08:58

As already mentioned there is no parent selector but if you recognise that you are already hovering over the parent you can achieve what you want.

A rough example:

#main-menu > li:hover > a
{
  background-color: #F00;
}

#main-menu >  li > .submenu > li:hover
{
  background-color:#00F;
}

<ul id="main-menu">
  <li>
    <a href="#">
      <i class="fa fa-building-o" aria-hidden="true"></i>
      Private Limited
      <i class="fa fa-caret-down"></i>
    </a>
    <ul class="submenu">
      <li><a href="#0">Company</a>
      </li>
      <li><a href="#0">Contact</a>
      </li>
      <li><a href="#0">Industry</a>
      </li>
    </ul>
  </li>
</ul>

Dirk Jan · Answer 2 · 2017-11-15T09:36:11.493

5

As other posts say there is no parent selector.

This is how it should work:

li:has(> i:hover) { /* styles to apply to the li tag */ }

What this does is check if li has a i with :hover state in it. If that's the case it applies the css. Unfortunately this is not supported yet..

edited Nov 15 '17 at 09:36

answered Jun 22 '16 at 07:10

Dirk Jan

2,355
3
20
38

score 4 · Answer 3 · answered Jun 22 '16 at 06:03

4

There is currently no way to select the parent of an element in CSS.

answered Jun 22 '16 at 06:03

Demeter Dimitri

608
8
17

score 2 · Answer 4 · edited May 07 '19 at 11:56

2

If you want trigger a child element with a child element use this.

.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 11:56

obscure

11,916
2
17
36

answered May 07 '19 at 11:38

Anıl Şahin

66
1

shivani · Answer 5 · 2016-06-22T07:05:58.790

0

Here you can go..

For Apply CSS..

$("#main-menu li").mouseover(function()
{ 
      $("#main-menu a:eq(0)").css({'color':'blue','font-weight':'bold'});
});

For Remove CSS..

$("#main-menu li").mouseout(function()
{ 
     $("#main-menu a:eq(0)").removeAttr("style");
});

[link] (https://jsfiddle.net/aj23whnb/)

edited Jun 22 '16 at 07:05

answered Jun 22 '16 at 06:41

shivani

980
1
8
29

I think u didn't got my question, my question is i have to highlight parent menu on hover of child menu – WebStarter Jun 22 '16 at 06:57
I understood your question. the code I put here is doing exactly what you want. Please try it – shivani Jun 22 '16 at 07:02
i want it using CSS only – WebStarter Jun 22 '16 at 07:04
@shivani If he wanted to do it with JQuery he will add the JQuery tag moreover you can still answer partially suggesting how to do it with JQuery – Vinod Srivastav Mar 14 '18 at 13:37
Of course you can use JS. Maybe the OP had to be more explicit by saying "CSS-only", but it is pretty obvious to most. – Kalnode Jul 15 '18 at 02:35

On child hover change the css of Parent

5 Answers5

Linked