将鼠标悬停在图像上并显示div元素 [英] Hovering over image and reveal div element

问题描述

有没有可能的方式，当我悬停在一个元素和显示我的其他元素与纯CSS？
我知道如何使用简单的悬停效果，例如

Is there any possible ways when I hover over one element and revealing my other element with pure css? I know how to make simple hover effects such as

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

但是当我将鼠标悬停在其他元素上并显示另一个元素时？
（对不起英语）

But when I hover over other element and reveal another element? (Sorry for bad English)

推荐答案

这是一个小提琴

如果你有彼此嵌套的元素，你可以使用下面的：

If you have elements nested within each other, you can use the following:

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

这篇关于将鼠标悬停在图像上并显示div元素的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！