How to style parent element when hover children Element

Question

I know, someone could say, this is a duplicate, but I say something to the answers on two other similar question and they aren't helping me.
Before I explain my problem, I show you this code and what is it for:

<div class="col-3 Hoehe2">
    <div class="sibling"></div>
    <div class="Hoehe2Oben">
        <a class="NormalAussehen" href="Löschen.php?Stadt=<?php echo $StadtIDs[$i] ?>">
            <div class="Hoehe2Kaestchen col-3">
                <div class="Hoehe2Kreuz">
                    X
                </div>
            </div>
        </a>
    </div>
    <div class="Hoehe2Text">
        <?
        echo $Example;
        ?>
    </div>
</div>

The col-3, Classes set the width. That is the code:

.col-1 {width: 8.33%;}
.col-2 {width: 16.66%;}
.col-3 {width: 25%;}
.col-4 {width: 33.33%;}
.col-5 {width: 41.66%;}
.col-6 {width: 50%;}
.col-7 {width: 58.33%;}
.col-8 {width: 66.66%;}
.col-9 {width: 75%;}
.col-10 {width: 83.33%;}
.col-11 {width: 91.66%;}
.col-12 {width: 100%;}

The whole thing("Hoehe2") is in the proportion 2:1 width:height. I have used this (https://www.w3schools.com/howto/howto_css_aspect_ratio.asp) tutorial. This is the Stylesheet of Hoehe2:

.Hoehe2 {
    padding-top: 66.66%;
    position: relative;
    border: 1px solid #00FF00;
    background-color: #1F9F1F;
}
.Hoehe2Oben {
    position: absolute;
    top: 0;
    left: 0;
    bottom: 100%;
    right: 0;
}

Inside this big div which has the proportion 2:1, I wanted to make a small div, with the same proportion. That was "Hoehe2Kaestchen". Inside Hoehe2Kreuz, there is an X (to delete). So, this code is:

.Hoehe2Kaestchen {
    margin-left: 75%;
    background-color: #F873F1;
    padding-top: 16.66%;
    position: relative;
    border: 1px solid #00FF00;
}
.Hoehe2Kreuz {
    position: absolute;
    top: 0;
    left: 0;
    bottom: 0;
    right: 0;
    text-align: center;
    font-size: 4vw;
}

Inside Hoehe2Text, there is the text and the javascript code is

.Hoehe2Text {
    position: absolute;
    top: 40%;
    left: 0;
    bottom: 35%;
    right: 0;
    text-align: center;
    border: 1px solid #00FF00;
}

Now, I show you my problem: I want to change the background-color of the Link (respectively the div "Hoehe2Kaestchen") when the mouse is over it. That works with

.Hoehe2Kaestchen:hover {
    background-color: #282828;
}

But, if the mouse is over the rest of <div class="Hoehe">, the background-color of Hoehe should change.
If I made

.Hoehe2:hover {
    background-color: #AAA016;/*Test color*/
}

The background color of Hoehe2 would change, if the mouse were over Hoehe2Kaestchen, too!
To prevent that, I wanted to something like this

.Hoehe2Kaestchen:hover ~.Hoehe2 {
    background-color: #1F9F1F;
}

But, as Hoehe2 is the parent of Hoehe2Kaestchen, that doesn't work.
I wanted to do it just like in this answer: How to style the parent element when hovering a child element?, and I made

.Hoehe2Kaestchen:hover ~.sibling {
        background-color: #1F9F1F;
    }

But that isn't working either.
Although this is like my question and the answer worked in the browser ("Run Code Snippet"), it isn't working in my website. What am I doing wrong?
I hope somebody can find my mistake.

I don't have time to read your whole question--please make it **much** shorter. Fundamentally, you **cannot** style a parent based on hovering a child, or anything else about a child in CSS. That's not the way it works. By the way, you know that you need a space between `~` and `.Hoehe2`, right? — , Jun 03 '17 at 13:26
you can use from link of https://stackoverflow.com/questions/8114657/how-to-style-the-parent-element-when-hovering-a-child-element — mrmr68, Jun 03 '17 at 13:27
Possible duplicate of [How to style the parent element when hovering a child element?](https://stackoverflow.com/questions/8114657/how-to-style-the-parent-element-when-hovering-a-child-element) — StudioTime, Jun 03 '17 at 13:32
@torazaburo I want to change the background color of parent but not children, if the mouse is over the parent. And I want to change the background color of the children but not of the parent if the mouse is over the parent — Bla Bla, Jun 03 '17 at 13:42
@DarrenSweeney why do you propose a duplicate that he already knows about and gave already himself the link in the question — G-Cyrillus, Jun 03 '17 at 13:42
Any element that comes before the one you hover in the markup, or an element that is a parent of the one you hover, cannot be changed with CSS hover, it needs a script — Asons, Jun 03 '17 at 13:43
@GCyrillus missed that due to size of the question, retracted — StudioTime, Jun 03 '17 at 13:44
@LGSon can you write an answer how to make this script (without jQuery) — Bla Bla, Jun 03 '17 at 13:44
If it is only about parent's background, maybe one of of those 3 tricks (shadow, pseudo or pointer-events) might do https://codepen.io/gc-nomade/pen/pDnuc — G-Cyrillus, Jun 03 '17 at 14:12

How to style parent element when hover children Element

0 Answers0