How to Style the Parent Element When Hovering a Child Element

How to style the parent element when hovering a child element?

I know it is an old question, but I just managed to do so without a pseudo child (but a pseudo wrapper).

If you set the parent to be with no pointer-events, and then a child div with pointer-events set to auto, it works:)

Note that <img> tag (for example) doesn't do the trick.

Also remember to set pointer-events to auto for other children which have their own event listener, or otherwise they will lose their click functionality.

div.parent {      pointer-events: none;}
div.child {    pointer-events: auto;}
div.parent:hover {    background: yellow;}

<div class="parent">  parent - you can hover over here and it won't trigger  <div class="child">hover over the child instead!</div></div>

Style child element when hover on parent

Yes, you can definitely do this. Just use something like

.parent:hover .child {
   /* ... */
}

According to this page it's supported by all major browsers.

On child hover change the css of Parent

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>

On hover of child, change background color of parent container (CSS only)

Using just `pointer-events` and `:hover`

Compatibility of pointer-events: caniuse.com. Tested working on IE 11 and Edge, Chrome and Firefox.

Set pointer-events: none on the div. The div will now ignore :hover.
```
div {
    pointer-events: none;
}
```
Set the parent background to change on hover
```
div:hover {
    background: #F00;
}
```
Set pointer-events: auto on the child so that the hover event is triggered only when the child is hovered
```
div > a {
    pointer-events: auto;
}
```

This works because the div is hovered when its child is hovered, and pointer events are activated with auto only on that child. Otherwise the parent ignores its hover pseudo-class.

Example

Note: IE 11 and Edge require the child element to be display: inline-block or display: block for pointer events to work.

div {  height: 200px;  width: 200px;  text-align: center;  pointer-events: none;}div:hover {  background: #F00;}div > a {  pointer-events: auto;  display: inline-block;}

<div>  <h1>Heading</h1>  <a href="#">Anchor Text</a></div>

affect parent element by hover on child

I have a workaround using CSS using pointer-events. This might help.

.element {  background: red;  padding: 10px;  margin: 10px;  pointer-events: none;}
.HoverThisElement {  background: yellow;  padding: 15px;  pointer-events: auto;}
.element:hover {  background: green; //add some styles you want to parent element}

<div class="bigWrap">  <div class="element">
    <div class="HoverThisElement"></div>
  </div>  <div class="element">
    <div class="HoverThisElement"></div>
  </div>  <div class="element">
    <div class="HoverThisElement"></div>
  </div></div>

How to Style the Parent Element When Hovering a Child Element