On child hover change the css of Parent

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


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>

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..


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>

Tags:

Html

Css

Recent Posts