On Hover of Child, Change Background Color of Parent Container (Css Only)

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 color of parent on hover the child element

For first sight It looks like another attempt to change style of parent element, but there is a way to achieve the effect using pure CSS.

The way is to use ::after pseudo-selector for anchor elements. We need to define it as absolutely positioned and set up to 100% dimensions of parent. Also to prevent overlapping of siblings, we need to decrease z-index attribute of pseudo-selector to render it beneath text.

Here is a snippet:

#social {    width: 400px;    height: 300px;    position: relative;    font-size: 36px;    font-weight: bold;    text-align: center;}a::after{    content: " ";    width: 100%;    height: 100%;    position: absolute;    top: 0;    left: 0;    z-index: -1;    border-radius: 20px;    background: transparent;    transition: background .5s ease;}a:link {    text-decoration: none;    transition: color .5s ease;}a:hover {    color: white;}#facebook:hover::after {    background: #3b5998;}#twitter:hover::after {    background: lightblue;}#google-plus:hover::after {    background: tomato;}#instagram:hover::after {    background: lightgreen;}

<div id="social">               <a id="facebook" href="#"> <span>Facebook</span></a><br>                <a id="twitter" href="#"> <span>Twitter</span></a><br>                <a id="google-plus" href="#"> <span>Google plus</span></a><br>                <a id="instagram" href="#"> <span>Instagram</span></a><br></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/

How to hover on child element but have background-color stretch to the parent?

You can simply move the padding to child elements:

.parent {  border: 1px solid black;  width: 30%;  padding: 0.8em 0;}.child {  padding:0 11px 0 13px;}.child:hover {  background-color: blue;}

<div class="parent">  <div class="child">Child 1</div>  <div class="child">Child Number 2</div>  <div class="child">Child Numero 3</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.

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>

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>

how to change background color inside element of div on hover effect?

A trick is to create another layer using the child element on hover to simulate the non-changing of the parent background.

Here is an example with box-shadow (On hover of child, change background color of parent container (CSS only))

.parent {  background-color: #cde;  width: 100%;  height: 100px;  position: relative;  overflow:hidden;}
.parent:hover {  background-color: black;}
.child {  position: absolute;  left: 50%;  top: 50%;  padding: 10px;  background-color: #ff0000;}
.child:hover {  background-color: yellow;  box-shadow:0 0 0 1000px #cde;}

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

Change Background-Color of Child Div When Parent Div is Hovered

You can add additional hover behavior in CSS to a child element like so:

/*on hovering the .item class, manipulate the child with the class .dashboard-item-top*/
.dashboard .item:hover > .dashboard-item-top {
    background: #CECECE;
    /*any other styles*/
}

.dashboard {    display: flex;}
.dashboard .item {    border-radius: .25rem;    border: 1px solid rgba(0,0,0,.125);    background: white;    text-align: center;    flex-grow: 1;    margin-right: 20px;    width: 20%;}
.dashboard .item:hover {    cursor: pointer;    border: 1px solid #A7A7A7;}
.dashboard .item:hover > .dashboard-item-top {    background: #CECECE;}
.dashboard-item-top {    border-bottom: 1px solid #dfdfdf;    padding: 2px;    font-size: 20px;    transition: background-color 0.5s ease;
    /*this background color should change to #F2F3F3 when     .item div is hovered*/}
.info-block-item {    font-size: 20px;}

<div class="dashboard">  <div class="item">    <div class="dashboard-item-top">      Classes    </div>    <div class="dashboard-item-bottom">      <span class="info-block-item">0</span>    </div>  </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>

On Hover of Child, Change Background Color of Parent Container (Css Only)