How To Change The Background Color Of Nested Divs

Selective hover groundwork change on nested divs

Tags: css, html, javascript

I'm working on the following files:

* {   margin: 0;   padding: 0;   box-sizing: edge-box; }  trunk {   background: #e4e4e4;   text-align: center; }  .content {   background: #fff;   padding: 20px 40px;   width: 60%;   margin: 20px machine; }  .container {   border: 1px solid black;   padding: 0 40px 40px 40px;   background: #fff; }

<html lang="en">   <head>     <meta charset="UTF-eight" />     <meta proper name="viewport" content="width=device-width, initial-calibration=1.0" />     <link rel="stylesheet" href="style.css" />     <title>Document</title>   </head>   <trunk>     <div class="content">       <div id="d1" form="container">         1         <div id="d2" class="container">           2           <div id="d3" form="container">3</div>         </div>       </div>     </div>   </body> </html>

The result I want to reach is that when I hover a sure div, its background changes to a #ccc grayness color.

However what adds some difficulty is that I want only the area that belongs only to the innermost hovered div to change background colour, not the child or parent.

Here is a pic to bear witness the behavior I want for example when hovering the second div:

enter image description here

EDIT: I Also Want THE Groundwork Colour TO BE RESET TO WHITE WHEN THE MOUSE IS Exterior AN Surface area

EDIT 2: IS THIS DOABLE WITH ONLY CSS OR IS JAVASCRIPT MANDATORY?

Answer

Some magic using pseudo element and box-shadow:

* {   margin: 0;   padding: 0;   box-sizing: border-box; }  body {   background: #e4e4e4;   text-marshal: center; }  .content {   groundwork: #fff;   padding: 20px 40px;   width: 60%;   margin: 20px motorcar;   position:relative;   z-index:0; /* this is important */   overflow:hidden; /* hide the extra box-shadow */ }  .container {   edge: 1px solid black;   padding: 0 40px 40px 40px;   position:relative; /* dont forget relative here */   groundwork:#fff; } .container::before, .container::afterward{   content:"";   position:accented;   z-index:-1;   acme:-1px;   left:-1px;   right:-1px;   lesser:-1px; } .container::before {    background:grey;  } /* on hover */ .container:hover::later on {   box-shadow:0 0 0 200vmax #fff; /* hide the upper div */ } .container:hover {   groundwork:transparent; /* brand the hovered div transaprent to see the "before" element */ } /**/

<div class="content">   <div id="d1" class="container">     1     <div id="d2" class="container">       ii       <div id="d3" class="container">3</div>     </div>   </div> </div>