类中的CSS类

Question

是否可以在另一个CSS类中更改一个类的元素？

特别是。

1. 第一个具有自己类的div具有css display：none元素

2. 第二个div有一个css：hover元素

3. 我试图将第一个div悬停在第二个div上

对此进行了尝试，但似乎不起作用：

&:hover + .popbox{
display: block; 
}

没有JS，必须是纯HTML和CSS

谢谢偷看！

Answer 1

希望该摘录对您有所帮助。

源：previous discussion

body {
    background-color: black;
}

.content {
    position :relative;
    z-index: 1;
    border: 2px solid white;
    background-color: blue;
    width: 960px;
    height: 300px;
    margin: auto;
    overflow: hidden;
}

.carte_button {
    position :absolute;
    z-index: 3;
    border: 2px solid white;
    background-color: yellow;
    width: 100px;
    height: 50px;
}

.carte {
    position :relative;
    top: -3px;
    z-index: 2;
    border-bottom: 2px solid white;
    border-top: 2px solid white;
    background-color: green;
    width: auto;
    height: 0%;
    margin: auto;
    transition: height 500ms;
}

.carte_button:hover + .carte {
    border-top: none;
    top: 0px;
    height: 300px;
}

.carte:hover {
    height: 300px;
}

<div class="content">
  <div class="carte_button"></div>
  <div class="carte"></div>    
</div>

Answer 2

您必须在父div标签上包装两个元素。 这是代码。

 .showme{ 
   display: none;
 }
 .showhim:hover .showme{
   display : block;
 }
 .showhim:hover .ok{
   display : none;
 }

<div class="showhim">
     HOVER ME
     <div class="showme">hai</div>
     <div class="ok">ok</div>
</div>