Question

嘿，我开始学习 Html。但是我对 :hover-function 有问题。我创建了按钮，当我将鼠标悬停在它们上方时，文本会带有下划线，因此您可以看到您所在的按钮。但我也希望出现一个下拉菜单。这就是与 :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 文件中，下拉菜单的文本。我导入了所需的 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;

}

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

片段

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

另一个例子是，在一个容器中工作，所以你不需要使用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;}

[这里是小提琴：] [2]：https://jsfiddle.net/ew7cu3oj/3/

CSS :hover-function 适用于一个类，但不适用于第二个

片段

1 个答案: