Question

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

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

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

Answer 1

Here's a fiddle

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

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

Answer 2

有三种方法可以做到这一点。元素必须是

相邻
嵌套在（后代）
嵌套在（儿童）

所以你可以这样做

<强> HTML

<div class="test test1">hover over me</div>
<div class="test test1-h"></div>

<br><br>

<div class="test test2">
    hover over me
    <div class="test test2-h"></div>
</div>

<br><br>

 <div class="test test3">
     hover over me
     <div>
         <div class="test test3-h"></div>
     </div>
 </div>

<强> CSS

.test {
    padding: 30px;
    background: red;
    display: inline-block;
}

.test .test {
    background: blue;
}
/******************Adjacent***************/
.test1:hover+div.test1-h {
    display: none;
}
/*****************nested within (descendant)***/    
.test2:hover > .test2-h {
    background: green;
}
/*****************nested within (Child)***/
.test3:hover .test3-h {
    background: tomato;
}

这是一个DEMO

Answer 3

我还发现我的代码的另一个解决方案可能是帮助别人。我实现了它 opacity和visibility Fiddle

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

3 个答案: