CODEWITHSUNDEEP
htmlcss
WebStarter
WebStarter

Reputation: 247

On child hover change the css of Parent

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.

Upvotes: 14

Views: 61380

Answers (5)

Jon P
Jon P

Reputation: 19772

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>

Upvotes: 31

Anıl Şahin
Anıl Şahin

Reputation: 66

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>

Upvotes: 2

Dirk Jan
Dirk Jan

Reputation: 2469

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

Upvotes: 6

shivani
shivani

Reputation: 1028

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

Upvotes: 0

Demeter Dimitri
Demeter Dimitri

Reputation: 618

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

Upvotes: 4

Related Questions