Change Background of Child If Parent :Hover

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

Change background of child if parent :hover

Like so.

.posts-item:hover .circle.icon {
    background: green;
}

No jQuery - Everyone's happy :)

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>

How to change background of child element when parent element is hovered?

Here you go with a solution

.parent {  background-color: green;  width: 100px;  height: 100px;}
.parent:hover > .child{  background-color: red;}
.child {  width: 50px;  height: 50px;}

<div class="parent">    <div class="child"></div></div>

child element background change when hovering over parent

Before:

.system-thumb .thumb-caption:hover {
  background-color: #00aba7;
  color: #fff;
}

After:

.system-thumb:hover .thumb-caption {
  background-color: #00aba7;
  color: #fff;
}

You need to assign who's going to have the event. In this case, <p> will be affected only if its parent is hovered. So, you need to move the :hover element to the parent selector.

Change Parent Background on Child Hover

Don't mix jquery with react

Here is how you can achieve this using only react

import React, {Component} from 'react';
import '../../styles/css/Home.css';

export default class Home extends Component {
  constructor() {
      this.state = {
          parentHover: false
      }
  }
  render(){
    return(
      <div className="menu" style={parentHover ? {"backgroundColor": "red"} : {}}>
        <div className="middle"> 
        <div className="menu-item btn-sobre" onMouseOver={this.state.parentHover = true} onMouseOut={this.state.parentHover = false}></div>
        <div className="menu-item btn-questionario" onMouseOver={this.state.parentHover = true} onMouseOut={this.state.parentHover = false}></div>
        <div className="menu-item btn-estresse" onMouseOver={this.state.parentHover = true} onMouseOut={this.state.parentHover = false}></div>
        </div>
      </div>
    );
  }

CSS: How can I change background of a child in response to a hover event on parent?

Just use .parent:hover .text as a selector: It is applied to .text within .parent when .parent is hovered.

.line {    text-align: center;    border-bottom: 1px solid gray;    line-height: 0.1em;    width: 100%;    margin: 10px 0 20px;}.text {    color: green;    background: black;    padding: 0 10px;}
.parent {  background: #000;  display: flex;  align-items: center;  height:100px;}

.parent:hover {  background: #eee;}
.parent:hover .text {  background: #eee;}

<div class="parent">    <div class="line" style="">    <span class="text">AND</span>  </div></div>

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>

Change background color of child div on hover of parent div?

Using CSS you can do this:

.parent:hover .child, .parent.hover .child { background: green; }

Here is the updated code: http://jsfiddle.net/bCkpb/17/

CSS :: child set to change color on parent hover, but changes also when hovered itself

Update

The below made sense for 2013. However, now, I would use the :not() selector as described below.

---

CSS can be overwritten.

DEMO: http://jsfiddle.net/persianturtle/J4SUb/

Use this:

.parent {
  padding: 50px;
  border: 1px solid black;
}

.parent span {
  position: absolute;
  top: 200px;
  padding: 30px;
  border: 10px solid green;
}

.parent:hover span {
  border: 10px solid red;
}

.parent span:hover {
  border: 10px solid green;
}

<a class="parent">
    Parent text
    <span>Child text</span>    
</a>

---

Related Topics