Como fazer a div aparecer e sumir
<!DOCTYPE html>
<html lang="pt-br">
<head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.1.0/css/bootstrap.min.css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.0/umd/popper.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.1.0/js/bootstrap.min.js"></script>
<!-- IE10 viewport hack for Surface/desktop Windows 8 bug -->
<link href="../../assets/css/ie10-viewport-bug-workaround.css" rel="stylesheet">
<link href="navbar-fixed-top.css" rel="stylesheet">
<!--[if lt IE 9]><script src="../../assets/js/ie8-responsive-file-warning.js"></script><![endif]-->
<script src="../../assets/js/ie-emulation-modes-warning.js"></script>
<script src="https://oss.maxcdn.com/html5shiv/3.7.3/html5shiv.min.js"></script>
<script src="https://oss.maxcdn.com/respond/1.4.2/respond.min.js"></script>
.navbar-esquerda{
margin-left:1550px;
position: absolute;
bottom: 1px;
width: 100%;
}
.navbar-esquerda1{
margin-left:1260px;
position: absolute;
bottom: 1px;
width: 100%;
}
.navbar-esquerda2{
margin-left:280px;
position: absolute;
bottom: 1px;
width: 100%;
}
.img-responsive{
margin-left:770px;
height:300px;
}
.jumbotron-fluid {
background-image: url(pao.jpg);
background-size: cover;
height: 150%;}
body{
background-image: url(pao.jpg);
background-size: 100% 100%;
}
.text{
margin-left:687px;
font-size: 100px;
margin-bottom: 100px;
}
.expositor{
margin-left:200px;
}
.cafe{
margin-left: 160px;
height:400px;
widht:400px;
}
.line{
margin-left:800px;
position: absolute;
bottom: 1px;
margin-top: 80px;
}
.Menulinha{
margin-left:600px;
bottom:500px;
position: relative;
height:150%;
}
.Menulinha1{
margin-left:600px;
bottom:200px;
position: relative;
height:150%;
}
.login{
margin-left:800px;
margin-top:-500px;
}
.pergunta{
margin-left:1450px;
margin-top:-400px;
}
.aceito{
margin-left:1550px;
margin-top:80px;
color: red;
</style>
</head>
<body>
<div class="sticky-top">
<div class="container-fluid">
<div class="jumbotron jumbotron-fluid bg-white my-0 py-0">
<img class="img-responsive" src="logocerto.png">
</div>
</div>
</div>
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css" integrity="sha384-Gn5384xqQ1aoWXA+058RXPxPg6fy4IWvTNh0E263XmFcJlSAwiGgFAW/dAiS6JXm" crossorigin="anonymous">
<div class="col-md-2"> <!-- alterando esses números consegue aumentar e diminuir cada campo -->
<nav class="navbar navbar-expand-md navbar-light bg-light mb-3">
<div class="collapse navbar-collapse" id="navbarSupportedContent">
<ul class="nav navbar-nav">
<li class="nav-item dropdown">
<a class="nav-link dropdown-toggle" href="#" id="navbarDropdownMenuLink" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
Cardapio
</a>
</nav>
</div>
<div class="col-md-2">
<div class="navbar-esquerda2">
<nav class="navbar navbar-expand-md navbar-light bg-light mb-3">
<div class="collapse navbar-collapse" id="navbarSupportedContent">
<ul class="nav navbar-nav">
<li class="nav-item dropdown">
<a class="nav-link dropdown-toggle" href="#" id="navbarDropdownMenuLink" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
Adotar Animal
</a>
</nav>
</div>
</div>
</div>
<div class="col-md-2">
<!-- ESSE É O ESPAÇO EM BRANCO -->
</div>
<div class="col-md-2">
<div class="navbar-esquerda1">
<nav class="navbar navbar-expand-md navbar-light bg-light mb-3">
<div class="collapse navbar-collapse" id="navbarSupportedContent">
<ul class="nav navbar-nav">
<li class="nav-item dropdown">
<a class="nav-link dropdown-toggle" href="#" id="navbarDropdownMenuLink" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
Fale Conosco
</a>
</nav>
</div>
</div>
</div>
<div class="col-md-2">
<div class="navbar-esquerda">
<nav class="navbar navbar-expand-md navbar-light bg-light mb-3">
<div class="collapse navbar-collapse" id="navbarSupportedContent">
<ul class="nav navbar-nav">
<li class="nav-item dropdown">
<a class="nav-link dropdown-toggle" href="#" id="navbarDropdownMenuLink" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
Animais Expostos
</a>
</nav>
</div>
</div>
</div>
</div>
</div>
<div class="container-fluid">
<div class="text-div">
<h1 class="text"> Bem Vindo </h1>
</div>
</div>
<div class="container-fluid">
<h1 class="expositor"> Oferta da Semana </h1>
</div>
<div class="container-fluid">
<div class="cafe1">
<img class="cafe" src="cafe.png">
</div>
</div>
<div class="linha1">
<img class="line" src="linha.png">
</div>
</div>
<div class="container-fluid">
<div class="Menulinha">
<img class="img-responsive" src="Menulinha.png" width="518">
<img class="img-responsive" src="Menulinha1.png" width="518">
<div class="login">
<div class="col-lg-10">
<p>Login:
<input type="login" class="form-control" id="inputEmail" placeholder="E-mail ou Nome" >
</p>
<p>Senha:
<input type="password" class="form-control" id="inputPassword" placeholder="Senha">
</p>
</div>
</div>
</div>
</div>
</div>
<h2 class="pergunta">
Caso queira cadastrar-se:
</h2>
<div="container">
<div class="aceito">
<button class="btn btn-danger navbar-btn">CLIQUE AQUI:</button>
</div>
</div>
<script src="https://code.jquery.com/jquery-3.2.1.slim.min.js" integrity="sha384-KJ3o2DKtIkvYIK3UENzmM7KCkRr/rE9/Qpg6aAZGJwFDMVNA/GpGFF93hXpG5KkN" crossorigin="anonymous"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.12.9/umd/popper.min.js" integrity="sha384-ApNbgh9B+Y1QKtv3Rn7W3mgPxhU9K/ScQsAP7hUibX39j7fakFPskvXusvfa0b4Q" crossorigin="anonymous"></script>
</body>
</html>
Quero fazer a div "Menulinha" aparecer e sumir, aparecer quando o usuário entrar com o mouse dentro da área do elemento e sumir quando sair.
Infelizmente meus conhecimentos em javascript são quase nulos, estou estudando essa parte ainda. Obrigado! Discussão (3)
Carregando comentários...