How to put this type of hover?

Question

How to put this type of hover?

Navigation

#1 by (2 votes)
#2 by (1 votes)

2

The hover I want is this: link

My hover looks like this: link

My css and html

html{
    font-family: sans-serif;    
}
header{
    width:100%;
    height:58px;
    background-color: #693;
    border-bottom: 6px solid #487f1e; 
}
 header #logotipo{
    margin-left: 50px;
    margin-top: -50px;
    position:absolute; 
 }
body{
    display: block;
    width: 100vw;
    height: 100vh;
    background:url(../img/Testing-banner2.jpg) no-repeat;
    background-size:cover;
    background-attachment: fixed;   
    font-size:16px;
    overflow-x:hidden;
    margin:0;
    padding:0;  
}
.div_centralizar{
text-align:center;
}
.logo {
    text-align:center;
	padding: 20px 0px 0px 0px;
}
nav#menu {
    display:inline;
}
#menu ul {
    padding:12px;
    margin-left: 240px;
    background-color:#693;
    list-style:none;
    position:relative; 
}
#menu ul li { 
    display: inline; 
}
#menu ul li a {
    color:#fff;
    padding: 2px 10px;
    display: inline-block;
    text-decoration: none;
    background:#693; 
}   
#menu  li a:hover { 
   background-color:#487F1E;   
}
header #logotipo:hover {
     background-color:#487F1E;
}
#entrar:hover{
    background-color:#487F1E;
    border-bottom: 4px solid #2c4d12;
}
.intro{
text-align:center;
}
.container_pagina_inicial{
    text-align:center;
    color:#fff;
    font-weight: bold;
}
.form-control {
    width: 100%;
    height: 34px;
    padding: 6px 12px;
    font-size: 14px;
    line-height: 1.42857;
    color: #555;
    background-color: #fff;
    background-image: none;
    border: 1px solid #ccc;
}
#entrar {
    font-size:18px;
    width: 368px;
    height: 42px;
    border-radius: 0;
    border-bottom: 4px solid #487f1e;
    background-color: #693;
    color: #fff;
    margin: 0 auto;
}
#email {
    width:368px;
    border-radius:0;   
    margin: 0 auto; 
}
#password {
    width:368px;
    border-radius:0;
    margin: 0 auto;
}
#rodape {
    margin-top: 250px;  
}
p.copyright{
    color:#666;
	text-align:center;
	margin:0 auto;
	margin-top:10px;
}
#subtitulo {
    font-weight:normal;

}

<!DOCTYPE html>
<html>
	<head>
		
	<meta charset="UTF-8">
	<title>Ensintech</title>
	<link rel="stylesheet" href="lib/bootstrap/css/bootstrap.min.css">
	<link rel="stylesheet" href="css/style.css">	
	<meta name="viewport" content="width=device-width, initial-scale=1">
	<link rel="stylesheet" href="css/style-mobile.css">
	
	</head>
	
	<body>

		<header>
         	<div class="container">
	         	<div class="row">
	              <div class="col-md-12">
	               	<nav id="menu">
	                 	<ul>
	                      <li><a class="adm" placeholder href="#">Área administrativa / Docente</a></li>
	                      <li><a class="aluno" href="#">Área do Aluno</a></li>
	                    </ul>
	                </nav>
	           </div>
	         </div>
	        </div>  
	        <img id="logotipo" src="img/ensintech.png" alt="Logotipo">        
		</header>

		<div class="container_pagina_inicial">
			<div class="intro">
				<div class="div_centralizar">
					<div class="logo"><img src="img/Egrande.png"></div>
				</div>         
			<p style="font-size:32px">
			Acesso Aluno
			</p>
			<p id="subtitulo">
			Digite seus dados de login para acessar o sistema
			</p>               
			<form id="form_login_pagina_inicial" action="act_login.cfm" method="post" enctype="multipart/form-data" name="form_login_pagina_inicial" target="escondido">
			    <div class="form-group">
					<input type="email" class="form-control" id="email" placeholder="E-mail">
				</div>
			    <div class="form-group">
					<input type="password" class="form-control" id="password" placeholder="Senha">
				</div>
			</form>        
    		<button id="entrar" type="submit" class="form-control">Entrar </button>
    		<br>
			<p><a href="#">Esqueci a senha</a></p>
			</div>
		</div>
     
		<div class="div_centralizar">            
			<p class="copyright">&copy; 2018 - Ensintech - Todos os direitos reservados</p>
		</div>
            <div id="rodape"></div>
    
    <script src="https://code.jquery.com/jquery-3.2.1.min.js"></script><scriptsrc="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
</body>
</html>

html css css-hover

asked by anonymous 24.01.2018 / 13:01

2 answers

1

You only need to change #menu ul li a. More specifically in the line of padding, which was previously 2px and was changed to 20px.

html{
    font-family: sans-serif;    
}
header{
    width:100%;
    height:58px;
    background-color: #693;
    border-bottom: 6px solid #487f1e; 
}
 header #logotipo{
    margin-left: 50px;
    margin-top: -50px;
    position:absolute; 
 }
body{
    display: block;
    width: 100vw;
    height: 100vh;
    background:url(../img/Testing-banner2.jpg) no-repeat;
    background-size:cover;
    background-attachment: fixed;   
    font-size:16px;
    overflow-x:hidden;
    margin:0;
    padding:0;  
}
.div_centralizar{
text-align:center;
}
.logo {
    text-align:center;
	padding: 20px 0px 0px 0px;
}
nav#menu {
    display:inline;
}
#menu ul {
    margin-left: 240px;
    background-color:#693;
    list-style:none;
    position:relative; 
}
#menu ul li { 
    display: inline; 
}
#menu ul li a {
    color:#fff;
    padding: 20px 10px;
    display: inline-block;
    text-decoration: none;
    background:#693; 
}   
#menu  li a:hover { 
   background-color:#487F1E;   
}
header #logotipo:hover {
     background-color:#487F1E;
}
#entrar:hover{
    background-color:#487F1E;
    border-bottom: 4px solid #2c4d12;
}
.intro{
text-align:center;
}
.container_pagina_inicial{
    text-align:center;
    color:#fff;
    font-weight: bold;
}
.form-control {
    width: 100%;
    height: 34px;
    padding: 6px 12px;
    font-size: 14px;
    line-height: 1.42857;
    color: #555;
    background-color: #fff;
    background-image: none;
    border: 1px solid #ccc;
}
#entrar {
    font-size:18px;
    width: 368px;
    height: 42px;
    border-radius: 0;
    border-bottom: 4px solid #487f1e;
    background-color: #693;
    color: #fff;
    margin: 0 auto;
}
#email {
    width:368px;
    border-radius:0;   
    margin: 0 auto; 
}
#password {
    width:368px;
    border-radius:0;
    margin: 0 auto;
}
#rodape {
    margin-top: 250px;  
}
p.copyright{
    color:#666;
	text-align:center;
	margin:0 auto;
	margin-top:10px;
}
#subtitulo {
    font-weight:normal;

}

<!DOCTYPE html>
<html>
	<head>
		
	<meta charset="UTF-8">
	<title>Ensintech</title>
	<link rel="stylesheet" href="lib/bootstrap/css/bootstrap.min.css">
	<link rel="stylesheet" href="css/style.css">	
	<meta name="viewport" content="width=device-width, initial-scale=1">
	<link rel="stylesheet" href="css/style-mobile.css">
	
	</head>
	
	<body>

		<header>
         	<div class="container">
	         	<div class="row">
	              <div class="col-md-12">
	               	<nav id="menu">
	                 	<ul>
	                      <li><a class="adm" placeholder href="#">Área administrativa / Docente</a></li>
	                      <li><a class="aluno" href="#">Área do Aluno</a></li>
	                    </ul>
	                </nav>
	           </div>
	         </div>
	        </div>  
	        <img id="logotipo" src="img/ensintech.png" alt="Logotipo">        
		</header>

		<div class="container_pagina_inicial">
			<div class="intro">
				<div class="div_centralizar">
					<div class="logo"><img src="img/Egrande.png"></div>
				</div>         
			<p style="font-size:32px">
			Acesso Aluno
			</p>
			<p id="subtitulo">
			Digite seus dados de login para acessar o sistema
			</p>               
			<form id="form_login_pagina_inicial" action="act_login.cfm" method="post" enctype="multipart/form-data" name="form_login_pagina_inicial" target="escondido">
			    <div class="form-group">
					<input type="email" class="form-control" id="email" placeholder="E-mail">
				</div>
			    <div class="form-group">
					<input type="password" class="form-control" id="password" placeholder="Senha">
				</div>
			</form>        
    		<button id="entrar" type="submit" class="form-control">Entrar </button>
    		<br>
			<p><a href="#">Esqueci a senha</a></p>
			</div>
		</div>
     
		<div class="div_centralizar">            
			<p class="copyright">&copy; 2018 - Ensintech - Todos os direitos reservados</p>
		</div>
            <div id="rodape"></div>
    
    <script src="https://code.jquery.com/jquery-3.2.1.min.js"></script><scriptsrc="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
</body>
</html>

Reference: Padding , Margin .

24.01.2018 / 13:14

how to close Word opened by VBA Difference in casting in Java

score 2 · Accepted Answer

I've done putting a line-height: 48px; on the link, this value is relative to the height of the menu which is 58px. And I set a padding: 0 12px; in <ul> to line-height does not exceed parent height

#menu ul {
    padding: 0 12px; /* fiz um ajuste para não ultrapassar a altura do pai */
    margin-left: 240px;
    background-color: #693;
    list-style: none;
    position: relative;
}
#menu ul li a {
    color: #fff;
    padding: 2px 10px;
    display: inline-block;
    text-decoration: none;
    background: #693;
    line-height: 48px; /* altura do verde escuro no hover */
}

See how it was: (Run on the "All Page" to see better)

<!DOCTYPE html>
<html>
	<head>
		
	<meta charset="UTF-8">
	<title>Ensintech</title>
	<link rel="stylesheet" href="lib/bootstrap/css/bootstrap.min.css">
	<link rel="stylesheet" href="css/style.css">	
	<meta name="viewport" content="width=device-width, initial-scale=1">
    <link rel="stylesheet" href="css/style-mobile.css">


    <link rel="stylesheet" type="text/css" media="screen" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" />
    <link rel="stylesheet" type="text/css" media="screen" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap-theme.min.css" />
    <link rel="stylesheet" type="text/css" media="screen" href="https://maxcdn.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css" />

    <style>
    
    html{
    font-family: sans-serif;    
}
header{
    width:100%;
    height:58px;
    background-color: #693;
    border-bottom: 6px solid #487f1e; 
}
 header #logotipo{
    margin-left: 50px;
    margin-top: -50px;
    position:absolute; 
 }
body{
    display: block;
    width: 100vw;
    height: 100vh;
    background:url(../img/Testing-banner2.jpg) no-repeat;
    background-size:cover;
    background-attachment: fixed;   
    font-size:16px;
    overflow-x:hidden;
    margin:0;
    padding:0;  
}
.div_centralizar{
text-align:center;
}
.logo {
    text-align:center;
	padding: 20px 0px 0px 0px;
}
nav#menu {
    display:inline;
}
#menu ul {
    padding: 0 12px;
    margin-left: 240px;
    background-color: #693;
    list-style: none;
    position: relative;
}
#menu ul li { 
    display: inline; 
}
#menu ul li a {
    color: #fff;
    padding: 2px 10px;
    display: inline-block;
    text-decoration: none;
    background: #693;
    line-height: 48px;
}  
#menu  li a:hover { 
   background-color:#487F1E;   
}
header #logotipo:hover {
     background-color:#487F1E;
}
#entrar:hover{
    background-color:#487F1E;
    border-bottom: 4px solid #2c4d12;
}
.intro{
text-align:center;
}
.container_pagina_inicial{
    text-align:center;
    color:#fff;
    font-weight: bold;
}
.form-control {
    width: 100%;
    height: 34px;
    padding: 6px 12px;
    font-size: 14px;
    line-height: 1.42857;
    color: #555;
    background-color: #fff;
    background-image: none;
    border: 1px solid #ccc;
}
#entrar {
    font-size:18px;
    width: 368px;
    height: 42px;
    border-radius: 0;
    border-bottom: 4px solid #487f1e;
    background-color: #693;
    color: #fff;
    margin: 0 auto;
}
#email {
    width:368px;
    border-radius:0;   
    margin: 0 auto; 
}
#password {
    width:368px;
    border-radius:0;
    margin: 0 auto;
}
#rodape {
    margin-top: 250px;  
}
p.copyright{
    color:#666;
	text-align:center;
	margin:0 auto;
	margin-top:10px;
}
#subtitulo {
    font-weight:normal;

}

    </style>
	
	</head>
	
	<body>

		<header>
         	<div class="container">
	         	<div class="row">
	              <div class="col-md-12">
	               	<nav id="menu">
	                 	<ul>
	                      <li><a class="adm" placeholder href="#">Área administrativa / Docente</a></li>
	                      <li><a class="aluno" href="#">Área do Aluno</a></li>
	                    </ul>
	                </nav>
	           </div>
	         </div>
	        </div>  
	        <img id="logotipo" src="img/ensintech.png" alt="Logotipo">        
		</header>

		<div class="container_pagina_inicial">
			<div class="intro">
				<div class="div_centralizar">
					<div class="logo"><img src="img/Egrande.png"></div>
				</div>         
			<p style="font-size:32px">
			Acesso Aluno
			</p>
			<p id="subtitulo">
			Digite seus dados de login para acessar o sistema
			</p>               
			<form id="form_login_pagina_inicial" action="act_login.cfm" method="post" enctype="multipart/form-data" name="form_login_pagina_inicial" target="escondido">
			    <div class="form-group">
					<input type="email" class="form-control" id="email" placeholder="E-mail">
				</div>
			    <div class="form-group">
					<input type="password" class="form-control" id="password" placeholder="Senha">
				</div>
			</form>        
    		<button id="entrar" type="submit" class="form-control">Entrar </button>
    		<br>
			<p><a href="#">Esqueci a senha</a></p>
			</div>
		</div>
     
		<div class="div_centralizar">            
			<p class="copyright">&copy; 2018 - Ensintech - Todos os direitos reservados</p>
		</div>
            <div id="rodape"></div>
    
    <script src="https://code.jquery.com/jquery-3.2.1.min.js"></script><scriptsrc="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>


</body>
</html>