悬停父元素应编辑子元素外观 - 不工作

Question

我有几个数字元素，我想在悬停父容器时为标题添加一些简单的悬停效果。但是，无论是＆gt; 还是以下面显示的方式都没有成功，我在那里做错了什么？

.kategorie_container .product_caption{
    margin:0;
    width:100%;
    position: absolute;
    padding: 1vh 2vw;
    bottom: 0;
    background:white;
    transition: 0.2s;
}

.kategorie_container figure:hover .kategorie_container .product_caption {
    background:blue;
}

这是它的标记结构：

<figure class="col col-3 ">
    <a href="#">
        <img src="assets/media/raster/active-pro80-dose_1.jpg" />
        <div class="product_caption">
        <h6 class="produktname">Productname</h6>
        <h6 class="produktpreis">Productprice</h6>
        </div>
    </a>
</figure>

谢谢！

Answer 1

类＆＃34; kategorie-container＆＃34;没有元素。在你的身影里面。我想你打算写

.kategorie_container figure:hover .product_caption {
    background:blue;
}