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

Question

我有几个图元素，我想在悬停父容器时为标题添加一些简单的悬停效果。但是，这并没有解决，>也没有如下所示，我在那里做错了什么？

.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

图中没有类“kategorie-container”的元素。我想你的意思是写

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