How to Change Parent Style by Child: Hover Action in Less

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 change parent style by child :hover action in LESS

Adding the :hover to the .parent instead of the .children div will achieve the result, http://codepen.io/duncanbeattie/pen/xvDdu

.wrapper {
    .parent {
        pointer-events:none;
        height: 100px;
        background:#000;
        .children {
            //some style;
            height:20px;
            background:#f00;
            pointer-events:all;
        }
        &:hover {
            height:150px;
        }
    }
}

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>

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>

Changing the child element's CSS when the parent is hovered

Why not just use CSS?

.parent:hover .child, .parent.hover .child { display: block; }

and then add JS for IE6 (inside a conditional comment for instance) which doesn't support :hover properly:

jQuery('.parent').hover(function () {
    jQuery(this).addClass('hover');
}, function () {
    jQuery(this).removeClass('hover');
});

Here's a quick example: Fiddle

Child change when parent is hovered over

Try this:

#action {
    background-color: $bgLight;
    border-top: 1px solid #252525;
    -webkit-transition: all 0.2s ease-out;
    -moz-transition: all 0.2s ease-out;
    -ms-transition: all 0.2s ease-out;
    -o-transition: all 0.2s ease-out;
    transition: all 0.2s ease-out;

    a {
        text-decoration: none;

        h1 {
            margin: 0;
            color: $colorLight;
            font-weight: 300;
            text-align: center;
        }
    }
}

#action:hover{
    background-color: #76A7D1;
    a{
       h1{
          color: $colorDark;
       }
     }
}

Show child element on parent hover in CSS

if you have styled hide like this (the page will be displayed as if the element is there but not seen):

#parent .hidden-child{
    visibility: hidden;
}

you may do it like this to just hide it:

#parent:hover .hidden-child{
    visibility: visible;
}

and if you have styled it like this (the page will be displayed as if the element is not there):

#parent .hidden-child{
    display: none;
}

you may do it like this:

#parent:hover .hidden-child{
    display: block;
}

In Action!

#parent {
    width: 10rem;
    height: 10rem;
    background-color: #ababab;
}

#parent .hidden-child{
    visibility: hidden;
}

#parent:hover .hidden-child{
    visibility: visible;
}

<div id="parent">
    <button class="hidden-child">Delete</button>
</div>

CSS: Change parent on focus of child

You can now do this in pure CSS, so no JavaScript needed /p>

The new CSS pseudo-class :focus-within would help for cases like this and will help with accessibility when people use tabbing for navigating, common when using screen readers.

.parent:focus-within {
  border: 1px solid #000;
}

The :focus-within pseudo-class matches elements that either themselves
match :focus or that have descendants which match :focus.

---

Can I use...

You can check which browsers support this by visiting http://caniuse.com/#search=focus-within

---

Demo

fieldset {
  padding: 0 24px 24px !important;
}

fieldset legend {
  opacity: 0;
  padding: 0 8px;
  width: auto;
}

fieldset:focus-within {
  border: 1px solid #000;
}

fieldset:focus-within legend {
  opacity: 1;
}

<link href="https://stackpath.bootstrapcdn.com/bootstrap/4.1.3/css/bootstrap.min.css" rel="stylesheet" />

<div class="container">
  <form>
    <fieldset>
      <legend>Parent Element</legend>
      <div class="form-group">
        <label for="name">Name:</label>
        <input class="form-control" id="name" placeholder="Enter name">
      </div>
      <div class="form-group">
        <label for="email">Email:</label>
        <input type="email" class="form-control" id="email" placeholder="Enter email">
      </div>
    </fieldset>
  </form>
</div>

---

Related Topics