title: CSS: show style on hover over multiple divs placed one over another
body: <p>I have 2 divs of different dimension placed one over the other. So there is a common intersection area. There is CSS :hover rule set for both the divs.
  If I hover over each div then the rule applies. But if I move over the intersection area, only the top div hover is actuated. </p>
  
  <p>When the mouse hovers on the area of intersection, I want the :hover rule to actuate for both the divs.</p>
  
  <p>Please see example code at <a href="http://jsfiddle.net/souvikbasu/881u0r7y/" rel="nofollow noreferrer">jsfiddle</a> </p>
  
  <p>On hover over the divs, the border shows up in black. I want both the div borders to show up when mouse hovers over the intersection area.</p>
  
  <p>The same code is copy pasted below for reference:</p>
  
  <p>HTML</p>
  
  <pre><code>&lt;div class='lower-layer'&gt;&lt;/div&gt;
  &lt;div class='upper-layer'&gt;&lt;/div&gt;
  </code></pre>
  
  <p>CSS</p>
  
  <pre><code>.upper-layer {
    width: 200px;
    height: 100px;
    background-color: red;
    position:absolute;
    left: 20px;
    top: 20px;
  }
  
  .lower-layer {
    width: 100px;
    height: 200px;
    background-color: blue;
    position:absolute; 
  }
  
  .upper-layer:hover {
    border: solid 2px black;   
  }
  
  .lower-layer:hover {
    border: solid 2px black;   
  }
  </code></pre>
  
  <hr>
  
  <p><strong>UPDATE</strong>: To make the question more explicit. I want the border of both the divs to show up only when the mouse is within the green box in the image below</p>
  
  <p><a href="https://i.stack.imgur.com/KBVLP.png" rel="nofollow noreferrer"><img src="https://i.stack.imgur.com/KBVLP.png" alt="enter image description here"></a></p>
  
  <p>If the mouse is over the black boxes like in image below then only the individual div under the mouse should show its border.</p>
  
  <p><a href="https://i.stack.imgur.com/Wnjif.png" rel="nofollow noreferrer"><img src="https://i.stack.imgur.com/Wnjif.png" alt="enter image description here"></a></p>