将鼠标悬停在图像上并显示div元素

Question

当我将鼠标悬停在一个元素上并用纯css显示我的其他元素时,有没有可能的方法？我知道如何制作简单的悬停效果,例如

.class{
//some styles
}
.class:hover{
//some classes
}

但当我将鼠标悬停在其他元素上并显示另一个元素时？(抱歉英文不好)

Answer 1

这是一个小提琴

如果您有彼此嵌套的元素,则可以使用以下内容:

<div id='parent'>
    <div id='child'></div>
</div>

#parent {
    width: 200px;
    height: 200px;
    background: blue;
}
#child {
    display: none;
    width: 100px;
    height: 100px;
    background: red;
}
#parent:hover #child {
    display: block;
}