Jump to content
MachineMan

Como fazer a div aparecer e sumir

Recommended Posts

  <!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! :thumbsup:

Share this post


Link to post
Share on other sites
5 horas atrás, angelorubin disse:

Como você nos descreveria passo a passo isto que pretende fazer?

 

Veja se ajuda - https://jsbin.com/yerigav/edit?html,js,output

Isso mesmo, só o show e o hide invertidos,quero fazer com a div inteira e tudo quanto estiver dentro dela, por que a ideia é que seja um login e senha que suma quando o usuário tirar o mouse e apareça quando colocar, vou usar seu exemplo como base e assim vou tentando, Muito Obrigado! :smile::thumbsup:

Share this post


Link to post
Share on other sites

Create an account or sign in to comment

You need to be a member in order to leave a comment

Create an account

Sign up for a new account in our community. It's easy!

Register a new account

Sign in

Already have an account? Sign in here.

Sign In Now

  • Similar Content

    • By violin101
      Caros amigos, saudações...
       
      Estou com uma pequena dúvida para apresentar ao usuário uma Mensagem de ERRO após consulta de CEP.
       
      Quando o usuário digita um CEP válido o sistema demonstra em uma TABELA os valores respectivos de FRETE de acordo com os CEP.
      -----[ até aqui tudo bem ]-----
       
      Meu problema é quando o usuário digita um CEP não válido. Nesta parte gostaria de Limpar a Tabela e mostrar uma TBODY de mensagem.
       
      <div class="col-md-12" id="divCity" style="display:none; margin-top:5px; margin-left:-23px;"> <div class="col-md-12"> <div class="input-group"> <label for="cidadeUf" class="lblCitys">Cidade:</label> <input type="text" name="cidadeUf" id="cidadeUf" class="form-control" style="margin-top:-17px; background:#ffffff; border: 0 solid #ffffff;" disabled /> </div> </div> <br/> <div class="col-md-12" style="margin-top:-10px; margin-left:10px;"> <div class="table-responsive"> <table class="table tableList" id="tborden"> <thead> <tr> <th colspan="3" style="text-align:left;">Prazo de Entrega para:</th> </tr> </thead> <tbody> <tr class="message"> <td colspan="3" class="text-center">O CEP informado não foi encontrado.</td> </tr> </tbody> </table> </div> </div> <div class="col-md-12" style="margin-top:-10px; margin-left:10px;"> <span class="infprz"> <i class='fa fa-caret-right'></i>&nbsp; Os prazos de Entrega e para Retirar na Loja, iniciam-se no 1º dia útil após a data da confirmação do pagamento. </span> </div> </div>  
       
      O JavaScript está assim:
       
      //Função para Buscar Cidade e Estado Via CEPs. $(function(){ $("#btn_consulta").click(function(){ var cep = $('#cepOrg').val(); if (cep == '') { alert('Informe o CEP antes de continuar'); document.getElementById("divCity").style.display = "none"; $('#cepOrg').focus(); return false; } //Muda o Status do Button $('#btn_consulta').html('Aguarde...'); $.ajax({ url: "<?php echo base_url();?>site/produtos/consulta", type: "POST", dataType:"json", data:{cep: cep}, success:function(data){ if (data.hasOwnProperty('erro')) { /* * Caso o usuário digita um CEP não válido o sistema apresenta um ALERT. * nessa parte gostaria de mostrar a LINHA criada na Tabela anteriormente */ alert('CEP não encontrado'); document.getElementById("divCity").style.display = "none"; $('#cepOrg').val(''); $('#cidadeUf').val(''); $('#cepOrg').focus(); $('#btn_consulta').html('Consultar'); return false; } else { //Exibe os Dados Recebidos $('#cidadeUf').val(data.localidade+'/'+data.uf); //Chama a Função para Exibir a DIV oculta statusDIV(); //Chama a Função Monta Tabela, passando a Variável de Busca montaTable(cep); //Muda o Status do Button $('#btn_consulta').html('Consultar'); } } });//Fim - ajax CEP });//Fim - function button });//Fim - 1º.function function montaTable(cep){ $.ajax({ url: "<?php echo base_url();?>site/produtos/getByCep", type: "POST", dataType:"json", data:{ cep: cep}, success:function(data){ //Remove Mensagem da Tabela $("#tborden tbody tr.message").remove(); var lin = ""; for (var i = 0; i < data.length; i++) { lin += "<tr>"; lin += "<td width='30%' style='text-align:left; font-size:16px;'>" + data[i].cepRegiao + "</td>"; lin += "<td width='21%' style='text-align:left; font-size:16px;'>" + data[i].frtEntreg + "</td>"; if (data[i].vlrFrete != null && data[i].vlrFrete != 0) { lin += "<td width='20%' style='text-align:right; font-size:16px; font-weight:bold; color:#19198F;'>" + mskVlr(data[i].vlrFrete) + "</td>"; } else { lin += "<td width='20%' style='text-align:right; font-size:16px; font-weight:bold; color:#137A13;'>Frete Grátis</td>"; } lin += "</tr>"; } //Atualiza a Tabela $("#tborden tbody").empty(); //Adiciona os Itens a Tabela $("#tborden tbody").append(lin); } });//Fim - ajax Valor Frete }  
       
      Como consigo executar essa mensagem ?
       
      Grato,
       
      Cesar
    • By Felper
      É possível fazer uma imagem .png mover-se por uma tela de Canvas (esquerda, direita, cima, baixo)? Poderiam mostrar um exemplo caso seja possível. É que estou tentando fazer um jogo, onde o jogador se move em um labirinto. O jogador seria uma imagem. Agradeço desde já!
    • By violin101
      Olá amigos, saudações...
       
      Feliz 2022 para todos nós.
       
      Amigos estou com um problema de Slider, o sistema começa o Carousel de depois de algum tempo o Slider para, mesmo colocando com LOOP infinito.
       
      Alguém por favor, poderia me ajudar a entender onde está o problema e como consigo resolver ?
       
      O JS está assim:
      $(".slider-active").owlCarousel({ loop: true, margin: 0, nav: true, autoplay: true, infinite: true, items: 1, autoplayTimeout: 10000, navText: ["<i class='fa fa-caret-left'></i>", "<i class='fa fa-caret-right'></i>"], dots: true, autoHeight: true, lazyLoad: true });  
       
      Grato,
       
      Cesar
    • By Jack Oliveira
      Ola pessoal tarde ou boa noite 
       
      É o seguinte tenho mais de 10 mil registro no banco de dados, no DATATABLE esta demorando um pouco para fazer o carregamento destas informações
      o tempo varia entre 16 á 20, 25 segundos para obter uma resposta.
       
      Queria que esta resposta pudessem ser mais rápida, se teria como claro ela ser mais rápida possível...
       
      Fiz um novo teste quantidade de arquivos 1mil arquivos a resposta é bem rapida não demora nem 3 segundo 
       
      Estou usando via ajax e json
       
      <script type="text/javascript"> $(function () { $("#DataTableAjaxDT").DataTable({ "pageLength": 20, "paging": true, "lengthChange": true, "ajax": "ajax/registros.php", "searching": true, "aLengthMenu": [ [5, 10, 15, 20, 25, 30, 35, -1], [5, 10, 15, 20, 25, 30, 35, "Todos"] ], "ordering": true, "info": true, "autoWidth": true, "columnDefs": [{ "targets": 'no-sort', "orderable": false, }], "language": { "sEmptyTable": "Nenhum registro encontrado", "sInfo": "Mostrando de _START_ até _END_ de _TOTAL_ registros", "sInfoEmpty": "Mostrando 0 até 0 de 0 registros", "sInfoFiltered": "(Filtrados de _MAX_ registros)", "sInfoPostFix": "", "sInfoThousands": ".", "sLengthMenu": "Mostrar _MENU_ resultados por página", "sLoadingRecords": "Carregando...", "sProcessing": "Processando...", "sZeroRecords": "Nenhum registro encontrado", "sSearch": "Pesquisar", "oPaginate": { "sNext": "Próximo", "sPrevious": "Anterior", "sFirst": "Primeiro", "sLast": "Último" }, "oAria": { "sSortAscending": ": Ordenar colunas de forma ascendente", "sSortDescending": ": Ordenar colunas de forma descendente" } } }); }); </script>  
       
       
       
    • By Jack Oliveira
      Ola pessoal boa tarde preciso de um favor de vocês se assim for possível!!
       
      Seguinte  tenho uma página que ela esta em apenas em HTML porem preciso pegar umas informações do banco de dados e não sabendo como trazer os
      dados das tabelas para esta página canais.html, talvez sej ate simples em fazer isso. Mais eu não estou sabendo de como trazer estas informações ai
       
      OBS: esta página de html precisa manter da forma que esta o codigo ai apenas usar uma forma de usar as informações nela 
      bom espero que tenha entendo o que preciso aqui...
       
      segue o código 
       
      Pagina canais.html
      <!DOCTYPE html> <html lang="pt-BR"> <head> <meta charset="UTF-8"> <meta name="language" content="pt-BR"> <meta http-equiv="X-UA-Compatible" content="IE=edge"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <link rel="icon" href="{{ favicon }}"> {{ google_analytics }} <title>{{ title }}</title> <link rel="canonical" href="{{ url }}"> <meta name="description" content="{{ description }}"> <meta property="og:site_name" content="{{ site_name }}"> <meta property="og:title" content="{{ title }}"> <meta property="og:type" content="Website"> <meta property="og:url" content="{{ url }}"> <meta property="og:description" content="{{ description }}"> <meta property="og:image" content="{{ image }}"> <meta name="twitter:title" content="{{ title }}"> <meta name="twitter:url" content="{{ url }}"> <meta name="twitter:description" content="{{ description }}"> <meta name="twitter:site" content="{{ app_url }}"> <meta name="twitter:image" content="{{ image }}"> <meta itemprop="title" content="{{ title }}"> <meta itemprop="name" content="{{ name }}"> <meta itemprop="url" content="{{ url }}"> <meta itemprop="description" content="{{ description }}"> <meta itemprop="image" content="{{ image }}"> <meta property="fb:app_id" content="{{ fb_app_id }}"> <meta name="og:image:width" content="590"> <meta name="og:image:height" content="auto"> <link rel="stylesheet" href="{{ url }}assets/css/app_style.css"> <link rel="stylesheet" href="{{ url }}assets/style.css"> <!-- Pensei em chamar atraves de um script --> <script type="application/javascript" src="{{ url }}assets/js/script.js"></script> <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css"> <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script> <script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script> <style> #container-wrapper-1 {background-size:cover;background-position:left top;background-image : url('images/{{ bg2 }}?v=1gr61cu');} #container-wrapper-2 {background-size:cover;background-position:left top;background-image : url('images/{{ bg3 }}?v=1gr61cu');} #container-wrapper-3 {background-size:cover;background-position:center top;background-image : url('images/{{ bg4 }}?v=1gr673m');} div#preloader { position: fixed; left: 0; top: 0; z-index: 999; width: 100%; height: 100%; overflow: visible; background: white no-repeat center center; } .btn-800 { background-color: {{ background_color1 }}; border-color: {{ border_color1 }}; color: {{ color1 }}; font-size:25px!important; margin: 10px; } .btn-800:hover { color: {{ color2 }}; background-color: {{ background_color2 }}; border-color: {{ border_color2 }}; margin: 10px; } .solucion { background-color: {{ background_color }}; border-color: {{ border_color }}; color: {{ color }}; width: 236px; font-size:25px!important; margin: 10px; display: block; text-align: center; } .solucion:hover { color: #fff; background-color: {{ background_color }}; border-color: {{ border_color }}; width: 236px; margin: 10px; display: block; text-align: center; } </style> </head> <body> <div class="card"> <div class="card-header white"> <strong> {{ titulo_informacao }} </strong> <p> {{ resumo }} </p> </div> <p style="text-align: center; line-height: 2.05;"> <span style="font-size: 20px;">{{ canais }}</span> </p> <p style="text-align: center; line-height: 2.05;"> <strong> <span style="font-size: 30px;">{{ play }}</span> </strong> </p> </div> </body> </html> Então seria isso ai, 
      só mais uma obs: toda vez que ser inserido ou atualizado os dados no banco que as informações seja atualizada tbm...
       
       
      Desde de já fico no aguardo
       
×

Important Information

Ao usar o fórum, você concorda com nossos Terms of Use.