CSS: Hovering over a divs with a different z-indexes - css

Question

Let's say I have to divs named "A" and "B", respectively.
<div id="A">
<div id="B">
</div>
</div>
div A has a z-index of 1 and has a width and height of 100%.
div B has a z-index of 2 and has a width and height of 50% and a top and left of 25%;
#A{
position:absolute;
width:100%
height:100%;
top:0%;
left:0%;
z-index:1;
background-color:black;
}
#B{
position:absolute;
width:50%;
height:50%;
left:25%;
top:25%;
z-index:2;
background-color:gray
}
If you were to hover over Div A and Div B at the same time, Div A will still register as being hovered over. In this hypothetical scenario, whenever I hover over Div A, I want Div A to turn Red and Div B to turn Gray, and whenever I hover over Div B, I want Div B to be Blue and Div A to be Black. How can I do this? I would prefer a CSS answer if there is one available.
I would think using #A:not(hover){} would work, but when I tried it, it failed.

Answer 1

Your hypothetical situation already exists in the way that you you want:
Hovering over A turns A red and B gray
Hovering over B turns B blue and A red
#A {
position: absolute;
width: 100%;
height: 100%;
top: 0%;
left: 0%;
z-index: 1;
background-color: black;
}
#A:hover {
background: red;
}
#B {
position: absolute;
width: 50%;
height: 50%;
left: 25%;
top: 25%;
z-index: 2;
background-color: grey;
}
#B:hover {
background: blue;
}
<div id="A">
<div id="B"></div>
</div>
However, if you really do want to stop <div> #A from being hovered over when <div> #B is hovered over, you can make use of a sibling element, as is described in this answer.
Hope this helps! :)

Answer 2

You cannot achieve what you're trying to do with CSS. The hover feature only allows you to change the attributes of that one element. I would recommend using JQuery.
$(document).ready(function(){
$("#A").hover(function(){
$("#A").css("background-color", "red");
$("#B").css("background-color", "gray");
});
/* Continue writing other hover functions */
});
JQuery allows you to style multiple elements given an action

Answer 3

You can't with pure css, you must help of jquery :
Part of Css:
#A:hover {
background-color: red;
}
#B:hover {
background-color: blue;
}
Part of jQuery:
$('#B').hover(function(){
$('#A').css('background-color','black');
},function(){
$('#A').css('background-color','red');
})
$(document).ready(function(){
$('#B').hover(function(){
$('#A').css('background-color','black');
},function(){
$('#A').css('background-color','red');
})
})
#A {
position:absolute;
width:100%;
height:100%;
top:0%;
left:0%;
z-index:1;
background-color:black;
border: 1px solid;
}
#B {
position:absolute;
width:50%;
height:50%;
left:25%;
top:25%;
z-index:2;
border: 1px solid;
background-color: gray;
}
#A:hover {
background-color: red;
}
#B:hover {
background-color: blue;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>
<div id="A">
<div id="B">
</div>
</div>

Answer 4

I found a pure css way using the link from Obsidian Age's answer:
<div id="ContainerDiv">
<div id="A"></div>
<div id="B"></div>
</div>
http://jsfiddle.net/k3Zdt/248/
All I had to do was take Div B out of Div A and remove the z-indexes.