Question

我有一个菜单，当胡佛，增加高度，但是当我尝试在html中添加Div或其他东西时，它会随着移动效果而下降

这是我的CSS代码

* {
font-family: sans-serif;
margin-top: -1px;
margin-right: -1px;
margin-left: -1px;
margin-bottom: -1px;
padding: 0;
width: 100%;
color: #F7F2F3;
}

header {
margin: auto;
width: 100%;
height: 23%;


}


banner#seis {
font-family:"good times rg"
}
body{
background-image: url(../Imagenes/darker_wood.jpg);
margin-top: 0px;
}

div.contenedor{
width:20%;
height:230px;
float:left;
transition:height .4s;
}

div#uno{
background-color: rgb(209,16,71);
}

div#dos{
background-color: rgb(11,2,33);
}

div#tres{
background-color: rgb(10,12,97);
}

div#cuatro{
background-color: rgb(21,110,252);
}

div#cinco{
background-color: rgb(5,3,208);
}


img.icon{
display:block;
margin:50px auto;
width:40px;
padding:20px;
border-radius: 50%;
background-color: rgba(255,255,255,.15);
box-shadow: 0px 0px 0px 30px rgba(255,255,255,0);
transition:box-shadow .4s;
}

p.texto{
font-size: 1.2em;
color: #FFFFFF;
text-align: center;
padding-top: 10px;
opacity: .6;
transition: padding-top .4s;
font-family: "good times rg";   

}

div.contenedor:hover {
height:250px;
}

div.contenedor:hover p.texto{
padding-top: 30px;
opacity:1;
}

div.contenedor:hover img.icon{
box-shadow: 0px 0px 0px 0px rgba(255,255,255,.6);
background-image: url(../Imagenes/darker_wood.jpg);
}

div.banner{
width: 100%;
float: left;
margin-top: 2px;
}

.menu_bar {
display:none;
}

label {

display: block;
margin-top: 20px;
letter-spacing: 1px;
padding-top: 0px;
}
.formulario {
margin:0 auto;
width:51%;
color: #666666;
font-family:Arial;
}
form {
margin: 0 auto;
width: 400px;
padding-top: 21px;
}

input, textarea {
width:100%;
height:2.7%;
background:#666666;
border:2px solid #f6f6f6;
padding:px;
margin-top:5px;
font-size:1.2em;
color:#ffffff;
}

textarea {
height:150px;
}

#submit {
width:8.5%;
height:35px;
border:none;
margin-top:20px;
cursor:pointer;
}

这是我的HTML：

<!doctype html>    
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1, user-   scalable=no, maximum-scale=1.0, minimum-scale=1.0">
<title>Untitled Document</title>
<link href="CSS/Principal.css" rel="stylesheet" type="text/css">
<link href="fonts.css" rel="stylesheet" type="text/css">
</head>

<body>
<header>
  <div class="menu_bar">
    <a href="#" class="bt-menu"><span class="icon-menu2"></span>Menu</a>
    </div>  
  <div class="contenedor" id="uno">
    <img class="icon" src="Imagenes/inicio.png" alt="Relevant textual     alternative to the image"> 
    <p class="texto">Inicio</div>

  <div class="contenedor" id="dos">
        <img class="icon" src="Imagenes/logojun.png" alt="Relevant textual     alternative to the image"> 
        <p class="texto">Nosotros
  </div>

  <div class="contenedor" id="tres">
    <img class="icon" src="Imagenes/eventos.png" alt="Relevant textual alternative to the image"> 
    <p class="texto">Eventos
  </div>

  <div class="contenedor" id="cuatro">
        <img class="icon" src="Imagenes/unam.png" alt="Relevant textual alternative to the image"> 
        <p class="texto">Votaciones UNAM
  </div>

  <div class="contenedor" id="cinco">
        <img class="icon" src="Imagenes/contacto.png" alt="Relevant textual alternative to the image"> 
        <P class="texto">Contacto
  </div>
</header>
</body>


<div>
<section class="formulario">
    <form action="contacto.php" method="post">
      <p>
        <label for="nombre">Nombre:</label>
        <input id="nombre" type="text" name="nombre" placeholder="Nombre,     Apellido y/o escuela" required="" />
        <label for="email">Email:<br>
        </label>
        <input id="email" type="email" name="email" placeholder="ejemplo@nightjunkies" required="" />
        <label for="mensaje">Mensaje:</label>
      </p>
      <label for="nombre">Nombre:</label>
      <p>&nbsp;</p>
      <p>
        <textarea id="mensaje" name="mensaje" placeholder="Mensaje" required>    </textarea>
        <input id="submit" type="submit" name="submit" value="Enviar" />
      </p>
    </form>

  </section>
</div>
</html>
`

然而，当我在我的HTML中添加一些额外的元素时，移动与悬停效果的下行。怎么摆脱这个？

Answer 1

你的其他元素随悬停的原因是这些元素直接位于header元素下面。当您将鼠标悬停在header元素内的div上时，这会导致header元素也展开。当标题元素扩展时，它下面的元素会被推下来对此作出反应。

如果您将标题上的高度设置为250px，这将适应其内部div的高度的任何变化。

header {
    margin: auto;
    width: 100%;
    height: 250px;
}

CSS3中的悬停高度效果向下移动div

1 个答案: