on hovers with parents and child in css

Question

I have a situation in which i want to change the color of my box with the on hover from the container i which this box is found.

I found out how to do this through a different question here on stackoverflow How to affect other elements when a div is hovered

But now i want to change the color of my box to a third option when i hover the box itself.

This is and exaple html with css.

<body>

<div class="container">container
<div class="box">
box</div>

</div

</body>
</html>

and the css.

.container{
background-color:grey;
height: 100px;
width:100px;
}
.container:hover .box{
background-color: aqua;
}
.box{
background-color: blue;
    width:50px;
height: 50px;
}
.box:hover{
background-color: white;
}

This is the way i tried to do it but this does not work. The first steps works but i can't get the third color.

Your div is missing a `>`, correct your code and see what happens. — nathanhleung, Nov 26 '15 at 14:33

score 0 · Answer 1 · answered Nov 26 '15 at 14:41

0

Simply change

.box:hover{
   background-color: white
}

TO

.container:hover>.box:hover{
   background-color: white
}

And try it here: http://jsfiddle.net/czmzxd6j/

answered Nov 26 '15 at 14:41

Moïze

707
8
16

Why use 2 times hover? it doens make any sense – Rickert Nov 26 '15 at 14:43
1

SImply because he asked for: But now i want to change the color of my box to a third option when i hover the box itself.... Please read in details before voting down. – Moïze Nov 26 '15 at 14:45
@Rickert it's more specific, I've explained it all in my own answer for you. because you can hover over a parent and child at the same time. it's kinda how inheritance works – SidOfc Nov 26 '15 at 14:45
@Enzo but when you hover the child you automaticly hove the parent so it looks useless to me – Rickert Nov 26 '15 at 14:47
@Rickert if you don't add the hover as I did, then the box will only have 2 background colors and not 3 as tjapko asked for. The Aqua background on HOVER will be ignored. Here is jsfiddle with css you suggest: http://jsfiddle.net/czmzxd6j/1/ – Moïze Nov 26 '15 at 14:51
I still think that 2 :hovers are useless – Rickert Nov 26 '15 at 15:04
Thank you! for the awnser and the site! :) – tjapko Nov 30 '15 at 13:47
@Rickert it is not for me because im using this in a situation with buttons and i want to change an image slightly depending on where the mouse is. the example was an easier was to explain what i wanted to do though :) – tjapko Nov 30 '15 at 13:48
@tjapko if my answers resolves your problem, please select it as the best answer. – Moïze Dec 01 '15 at 14:58

SidOfc · Answer 2 · 2015-11-26T14:52:10.900

You'll have to create a more specific selector.

You're setting .container:hover .box {...} which is more specific than .box:hover.

Your issue will be resolved if you use .container:hover .box:hover {...} because this is more specific than the one with just the .box at the end.

Using the direct-child selector isn't the way nor is !important (sorry guys, no offence but it's just not the correct approach here.)

CSS is all about overwriting and that is why these things can be nasty sometimes.

Whenever something doesn't get applied correctly just think to yourself for 3 seconds: "Are there any other selectors that manipulate this element that could be more specific?".

With the general selector .box:hover any box anywhere in the DOM will have that hover as long as it has the .box class however this is not true for the other selector including .container:hover .box:hover.

That selector is actually more specific due to the fact that now only .box elements within the .container elements get the hover.

By specifying the general selector instead of one that is atleast as specific it will simply be overwritten by the more specific one, that's why you need to re-add .container:hover to the selector.

I hope it makes sense to you.

Good luck!

@tjapko if it worked for you, to the left of my answer are a tick and optionally an upvote if you check the tick it means your question is solved - other people who come here in the future can get something useful out of the information provided :) — SidOfc, Nov 30 '15 at 14:03

score -1 · Answer 3 · answered Nov 26 '15 at 14:39

-1

try this:

.box:hover{
background-color: white !important;
}

you can see it here: https://jsfiddle.net/fusg2o3f/

answered Nov 26 '15 at 14:39

Razvan V.

46
6

its better dont use important – Rickert Nov 26 '15 at 14:40

on hovers with parents and child in css

3 Answers3