CSS悬停样式在悬停选择器附加到父容器之前不起作用[重复]

Question

当悬停在父图片上时，我正在尝试显示子图片。当前，在父图片上设置CSS悬停样式时，子图片永远不可见。

但是，如果我更改css悬停样式以引用.picture-container元素，而不是.parent-picture，它就会正常工作。这是为什么？

这似乎与父image元素是绝对元素无关。

.picture-container {
    width:300px;
    height:300px;
    float:left;
    position:relative;
}

.parent-picture {
    float:left;
    width:100%;
    height:100%;
    position:absolute;
    top:0;
    left:0;
}

.child-picture {
    position:absolute;
    top:0;
    right:0;
    border:1px solid red;
    width:100px;
    height:100px;
    display:none;
}

.parent-picture:hover .child-picture {
    display:block;
}

<div class="picture-container">
        <img src="https://picsum.photos/200" alt="" class="parent-picture">    
        <img src="https://picsum.photos/200" alt="" class="child-picture">
</div>



    

Answer 1

这是因为您使用的是.parent-picture:hover.child-picture,这意味着child-picture在parent-picture中,这不是真的,但是child-picture在picture-container中,您需要使用同级选择器,

相邻同级选择器(+)

通用同级选择器(~)

.picture-container {
    width:300px;
    height:300px;
    float:left;
    position:relative;
}

.parent-picture {
    float:left;
    width:100%;
    height:100%;
    position:absolute;
    top:0;
    left:0;
}

.child-picture {
    position:absolute;
    top:0;
    right:0;
    border:1px solid red;
    width:100px;
    height:100px;
    display:none;
}

.parent-picture:hover + .child-picture {
    display:block;
}

<div class="picture-container">
        <img src="https://picsum.photos/200" alt="" class="parent-picture">    
        <img src="https://picsum.photos/200" alt="" class="child-picture">
</div>