CSS :hover-function 工作了一个 class 但没有一秒钟

Question

嘿嘿我开始学了Html。但我对 :hover-function 有疑问。我创建了按钮，当我将鼠标放在它们上面时，文本会带有下划线，这样您就可以看到您在哪个按钮上。但我还希望出现一个下拉菜单。这就是我的第二个 class 与 :hover 函数相关的问题没有出现。

这里是蓝色条的片段（有效）

/*Übergruppe*/
.button{   
    height: 73px;
    top: -2px;
    background-color: transparent;
    background-repeat:no-repeat;
    border-color: transparent;
    cursor:pointer;
    overflow: hidden;
    outline:none;
    /*Font*/
    font-family:Arial, Helvetica, sans-serif ;
    font-size: 12pt;
    color: white;
    position: absolute;
    /*cursor*/
}

.balken{
    opacity: 1; 
}

.button:hover + .balken{
    background-color:  rgba(108, 155, 243, 0.945);
    height: 4px;
    /*Position*/
    position: absolute;
    top: 66px;
}


/*CSS-Klassen*/
.UeberCFG{   
    left: 470px;
    border-right-width: 17px;
}
.balkenUeberCFG{
    width: 80px;
    /**/
    left: 475px;

这里是另一个 CSS-file 下拉菜单的文本。我导入了所需的 CSS 文件。我曾经也尝试过将所有内容放入一个 CSS 文件中，但这也没有成功，是的，它链接到 HTML 文件。

@import url(../CSS-Data/Buttons.css);
@import url(../CSS-Data/Header.css);

/*Übergruppen*/
.Dconfig{
    opacity: 1;
}
.button:hover + .Dconfig{
    background-color: rgb(223, 217, 217);
    width: 300px;
    height: 300px;
    /*Position*/
    position: absolute;
    top:70px;
}

/*Untergruppen*/

.DUeberCFG{
left: 470px;

}

这是它的样子（我错过了蓝色条下方的浅灰色框）

片段

header {    
    background-color: black;
    height: 70px;
    width: 100%;  
}   

/*ButtonsCSS*/

.button{   
    height: 73px;
    top: -2px;
    background-color: transparent;
    background-repeat:no-repeat;
    border-color: transparent;
    cursor:pointer;
    overflow: hidden;
    outline:none;
   
    font-family:Arial, Helvetica, sans-serif ;
    font-size: 12pt;
    color: white;
    position: absolute;
}

.balken{
    opacity: 1; 
}

.button:hover + .balken{
    background-color:  rgba(108, 155, 243, 0.945);
    height: 4px;
 
    position: absolute;
    top: 66px;
}


.UeberCFG{   
    left: 470px;
    border-right-width: 17px;
}
.balkenUeberCFG{
    width: 80px;
    /**/
    left: 475px;
}

/*DropdownCSS*/


.Dconfig{
    opacity: 1;
}
.button:hover + .Dconfig{
    background-color: rgb(223, 217, 217);
    width: 300px;
    height: 300px;
   
    position: absolute;
    top:70px;
}

.DUeberCFG{
left: 470px;

}

<!DOCTYPE html>
<html lang="de">


<body>
  <header>      

    <div class="Buttons">          
      <button class="button UeberCFG">Über CFG</button>
      <div class="balken balkenUeberCFG"></div>
    </div>    

    <div class="Dropdownmenue">
        <div class="Dconfig DUeberCFG"></div>  
        <div class="Suchleiste"></div>         
    </div>

      </header> 

</body>
</html>

Answer 1

您只能使用 .class + .class 如果第二个是在第一次关闭后直接下一个。

看这里：[W3CSchools] [1]: https://www.w3schools.com/cssref/sel_element_pluss.asp

另一个例子是，在一个容器中工作，所以你不需要使用元素选择器+ from css2。对于受训者来说，更好的方法是使用 bootstrap 这样的框架。那里有你需要的一切。

但是这里有一个关于我的意思的例子，在同一个容器中工作。它只是一个例子，不是更值得推荐的代码片段。更像是一团糟 ;)

<div id="mainwrapper">
<div class="button">Ich bin ein Button
<div class="dropdown">
<ul>
<li>Menu 1</li>
<li>Menu 2</li>
<li>Menu 3</li>
<li>Menu 4</li>
<li>Menu 5</li>
<li>Menu 6</li>
</ul>
</div>
</div>
</div>

#mainwrapper {
    max-width: 300px;
    text-align: center;
}

.button, .dropdown {
    background: #ccc;
    color: #000;
    display: flex;
    flex-direction: column;
}

.button {
  font-size: 2rem;
  line-height: 3rem;
  text-decoration: none;
  color: #181818;
  font-family: arial;
}

.dropdown {
  height: 0px;
  padding:0px;
  transition: all .5s;
  overflow: hidden;
  }

ul {
    list-style: none;
    padding: 0;
  margin: 0;
}

ul li {
  margin: 10px 0px;
  padding: 5px 0px;
  }

li:hover {
  background: red;
  color: #ffffff;
}

.button:hover .dropdown {display:block;height: 410px;}

[这里是 Fiddle:] [2]: https://jsfiddle.net/ew7cu3oj/3/

CSS :hover-function 工作了一个 class 但没有一秒钟

CSS :hover-function is working for one class but not for a second

html

css

hover

片段