Question

我知道，有人可以说，这是重复的，但我在另外两个类似的问题上说了些答案，他们没有帮助我。
在我解释我的问题之前，我会告诉你这段代码及其用途：

<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>

col-3，Classes设置宽度。那就是代码：

.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%;}

整个事物（“Hoehe2”）的比例为2：1宽度：高度。我已经使用了这个（https://www.w3schools.com/howto/howto_css_aspect_ratio.asp）教程。这是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;
}

在这个比例为2：1的大div中，我想以相同的比例制作一个小div。那就是“Hoehe2Kaestchen”。在Hoehe2Kreuz里面，有一个X（要删除）。所以，这段代码是：

.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;
}

在Hoehe2Text内部，有文本和javascript代码

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

现在，我告诉你我的问题：我想在鼠标悬停时更改Link的背景颜色（分别为div“Hoehe2Kaestchen”）。这适用于

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

但是，如果鼠标超过<div class="Hoehe">的其余部分，则Hoehe的背景颜色应该改变。
如果我做了

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

如果鼠标也在Hoehe2Kaestchen上方，Hoehe2的背景颜色也会改变！
为了防止这种情况，我想要这样的事情

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

但是，由于Hoehe2是Hoehe2Kaestchen的父母，这不起作用我想在这个答案中做到这一点：How to style the parent element when hovering a child element?，我做了

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

但这也不起作用。
虽然this就像我的问题而且答案在浏览器中有效（“运行代码片段”），但它在我的网站上无效。我做错了什么？
我希望有人能找到我的错误。

如何在悬停子元素

0 个答案: