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

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.

score 0 · Answer 1 · answered Oct 31 '17 at 03:14

0

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! :)

answered Oct 31 '17 at 03:14

Obsidian Age

41,205
10
48
71

How could I use the answer you linked me in this example? Could you use a Div C to show me? – Bradley William Elko Oct 31 '17 at 03:20
Also I made a typo. Div A was suppose to turn black when you hovered over Div B. – Bradley William Elko Oct 31 '17 at 03:22
Thanks for the link you sent me. You helped me solve the problem! – Bradley William Elko Oct 31 '17 at 03:49
No problem; I knew it involved a sibling element, but couldn't quite get it to work for your specific situation. I'd assume the `z-indexes` were conflicting in some way. Glad to hear you got it sorted though :) – Obsidian Age Oct 31 '17 at 03:51

Ehsan · Answer 2 · 2017-10-31T03:39:53.230

0

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>

edited Oct 31 '17 at 03:39

answered Oct 31 '17 at 03:15

Ehsan

12,655
3
25
44

Div A isn't changing back to black when you hover over Div B. :/ – Bradley William Elko Oct 31 '17 at 03:19
you said:` I hover over Div B, I want Div B to be Blue and Div A to be Red.` – Ehsan Oct 31 '17 at 03:20
Typo. I fixed that. – Bradley William Elko Oct 31 '17 at 03:21
It turned black, but it wont turn red again. I want it to be a permanent event. – Bradley William Elko Oct 31 '17 at 03:33
@BradleyWilliamElko , try again! – Ehsan Oct 31 '17 at 03:40
@BradleyWilliamElko,how is it? – Ehsan Oct 31 '17 at 03:45
It works fine, but I found a css answer. Check mine out. – Bradley William Elko Oct 31 '17 at 03:47
@BradleyWilliamElko , you change html code.you waste my time only. – Ehsan Oct 31 '17 at 03:49
But I didn't use JQuery, which was the whole point of asking the question. – Bradley William Elko Oct 31 '17 at 03:50

score 0 · Answer 3 · answered Oct 31 '17 at 03:15

0

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

answered Oct 31 '17 at 03:15

DannyV

220
1
6

you're saying when "A" is not hovered do this. That doesn't have anything to do with what you're trying to achieve – DannyV Oct 31 '17 at 03:29
Have you ever used JQuery? – DannyV Oct 31 '17 at 03:30
Yes, but I don't want to use anymore external scripts in my project. – Bradley William Elko Oct 31 '17 at 03:32
Why not? Use a JQuery CDN, therefore, it doesn't take up space. Listen, your problem can only be fixed with JQuery, CSS just doesn't have the capabilities – DannyV Oct 31 '17 at 03:34
I found a css answer!! Check it out. – Bradley William Elko Oct 31 '17 at 03:48

score 0 · Answer 4 · answered Oct 31 '17 at 03:47

0

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.

answered Oct 31 '17 at 03:47

Bradley William Elko

364
2
24

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

4 Answers4