13

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.

13

5 Answers 5

30

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>

1
  • This is the real deal! Thanks
    – Sorin
    Jan 30, 2018 at 15:38
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..

0
4

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

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>

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/)

5
  • 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, 2016 at 6:57
  • I understood your question. the code I put here is doing exactly what you want. Please try it
    – shivani
    Jun 22, 2016 at 7:02
  • i want it using CSS only
    – WebStarter
    Jun 22, 2016 at 7: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 Mar 14, 2018 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, 2018 at 2:35

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge that you have read and understand our privacy policy and code of conduct.

Not the answer you're looking for? Browse other questions tagged or ask your own question.