Style Child Element When Hover on Parent

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.

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>

How to apply CSS on child element when hover parent element?

Remove the +

 #DraggableImage:hover .onHover{
      display: block;
    }

How to make parent div activate styling of child div for hover and active

Use group-hover state

Add group class to your parent element (anchor-tag in your case)
Replace hover: with group-hover:

Worth to mention not every property supports group-hover, so there can be situation, where you may need to extend core plugins. More info about group-hover here

DEMO https://play.tailwindcss.com/dzacJTR76X

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>

Change the styling of a child div with CSS hover on parent JSX

&:hover > .rightHoverIcon expects .rightHoverIcon to be a direct child of clickableRow, but it isn't (there's a table cell in-between). Remove the > so you're using a descendant combinator instead of a child combinator:

clickableRow: {
  '&:hover': {
    backgroundColor: theme.palette.background.default,
    cursor: 'pointer',
  },
  '&:hover .rightHoverIcon': {
  // -----^
    backgroundColor: 'red',
  },
},

Or, alternately, if you want to use child combinators, you'll need at least two of them (assuming TableCell only puts one element between its parent and the icon), e.g. &:hover > something-for-the-cell > .rightHoverIcon.

Style Child Element When Hover on Parent