Jump to content
Sign in to follow this  
gaahsz

Mudar Background-color de duas divs jquery

Recommended Posts

Olá pessoal, gostaria de que se ao passar o mouse na div1 que mude o background-color dela(div1)

e de outra div(div2) e que aconteça o mesmo se eu passar o mouse na outra div(div2).

 

Eu consegui em jquery fazer com que mude o background-color da div que eu passei o mouse e não das duas divs!!

 

HTML

<tr 
			<td class="vertical">
			<img src="SUPAT.png" class="setor" id="objeto1">
	
				
				
			</td>
			
			<td class="celulas1" valign="center" align="left">
		
				<a href="#" class="linksicones"> <img src="administracaopredial.png"  class="menus"> <div id="texto" class="textoClass"> 	Administração Predial </div> </a>
			</td>
		
			<td class="vertical">
					<img src="SUPAT.png" class="setor">
				
			</td>
		
			<td class="celulas1">
				<a href="#" class="linksicones"> <img src="arquivo.png"  class="menus"><div id="texto" class="textoClass"> 	Arquivos </div> </a>
			</td>
	</tr>

Minha ideia é passar o mouse no TD class="Vertical" e trocar o background deste e do TD class="celulas1"

e o mesmo acontecer quando eu passar o mouse no td class="celulas1"

 

JQUERY

$(document).ready(function($){
$('.celulas1, .textoClass').mouseenter(function(){
        $(this).find("div").css({
			
			
			color: "white"
		
		
		});
    
	
	});
$('.celulas1').mouseleave(function(){
         $('.textoClass').css({
			color: "#00416B"
			
		 
		 
		 });
    
	
});




 
 

 
});

faço isso com a cor da letra pois o backgorund eu faço no CSS más vejo que só conseguirei fazer isso pelo jquery

 

CSS

td.vertical{
	width: 20px;
	height: 80px;
	border-color:  #00416B;
	border-style: 	solid;
	border-width: 1px;
	color: white;
	font-size: 15px;
	
	font-weight: bold;
	transition: all 0.5s ease-in;
	
}
td.vertical:hover{
	background-color: #00416B;
	
}

td.celulas1{
	
	text-align: left;
	font-weight: bold;
	height: 80px;
	width: 380px;
	border-color:  #00416B;
	border-style: 	solid;
	border-width: 1px;
	
	
	transition: all 0.5s ease-in;
	
}

td.celulas1:hover{
	background-color: #00416B;

	
	
}

VALEU!!

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
Sign in to follow this  

  • Similar Content

    • By andrelimaverde
      Pessoal preciso de uma ajuda, desde já agradeço à todos.
      "Site teste, estudos..."
      Tenho um formulário com 3 etapas, ele está trabalhando em php normalmente e salvando os dados preenchidos em .txt (para testes apenas).
      Vamos lá, nas 3 etapas o form está com action="1.php" (2.php,  3.php) e method="post". [Não vou colocar muito código para simplificar, pois é um formulário básico fácil de entender]
      Exemplo:  Pagina 1 - envia para action '1.php'
      Nome: 
      Telefone:
      <input type="submit" value="Continuar">
      (
       O arquivo 1.php armazena os dados e redireciona => header( 'Location:Pagina2.php' ) ;   
       Assim como os outros php's
      )
      Pagina 2 - action 2.php armazena os dados e redireciona => header( 'Location:Pagina3.php' ) ; 
      Cidade:
      Endereço:
      <input type="submit" value="Continuar">
       
      A questão está na 3ª página
      Página 3 -
      Email:
      (Preciso que após preencher o campo da página 3 no caso "Email:",  ao clicar no botão, neste caso não sei se seria um submit ou button. O formulário não redirecionar para pagina 4, ao clicar ele enviar e salvar normalmente, mas aparecer um novo input na mesma pagina por Exemplo:"Twitter:"  ) 
      No caso preciso que ele não redirecione , gostaria de colocar um gif de carregando por 15 segundos por exemplo como se estivesse processando as informações... e em seguida ele apresentar o novo input do "Twitter:" , onde ai sim enviaria normalmente...
    • By tomas.david100
      Boa tarde tenho a seguinte dúvida será possível utilizar um css só para o menu lateral e outro css para o body? Vou deixar uma imagen a seguir para se perceber melhor.
       

    • By SrTunes
      Boa tarde amigos, sei que há vario tópicos parecidos com esse, com praticamente a mesma dúvida, mas com diferentes resoluções. Mas o motivo de eu ter aberto um tópico novo foi por causa tenho duvida no meu código que não encontrei resposta nos outros tópicos.
       
      De antemão informo que meu conhecimento em javascript é muito limitado, por isso peço encarecidamente a paciência e compreensão dos colegas e dede já agradeço a todos. Muito obrigado.
       
      Bem, o problema:
       
      Tenho um form php com dois campos apenas: "PN do item" e "Descrição".
      Para o primeiro campo de input (PN do Item), com a ajuda da internet, implementei um script que a medida que digito ele faz uma busca no BD e autocompleta. Até ai beleza.
      O que estou querendo agora é, aproveitando a minha estrutura, fazer com que ao escolher o item do primeiro campo de input, o segundo campo de input me retornasse do BD a descrição deste item automaticamente sem refresh da página.
      Isso é possível?
       
      Abaixo deixo meus scripts:
      <?php require_once 'config/conexao.class.php'; require_once 'config/crud.class.php'; $con = new conexao(); // instancia classe de conxao $con->connect(); // abre conexao com o banco $consulta = mysql_query("SELECT pn_item FROM descricao_de_itens"); //Busca da tabela descricao_de_itens o campo pn_item para preencher as opções no form $dados =""; if(mysql_num_rows($consulta) > 0){ while($row = mysql_fetch_assoc($consulta)){ $dados = $dados."\"".$row["pn_item"]."\","; } } $dados = substr($dados,0,-1); // retira a última virgula ?> <!DOCTYPE html> <html> <head> <meta http-equiv="Content-Type" content="text/html; charset=UTF-8"> <link rel="stylesheet" href="http://localhost/controle_estoque/css/jquery-ui.css"> <script src="http://localhost/controle_estoque/js/jquery-3.4.1.js"></script> <script src="http://localhost/controle_estoque/js/ui/jquery-ui.js"></script> <script> $( function(){ var availableTags = [<?php echo $dados?>]; $( "#tags" ).autocomplete({ source: availableTags }); } ); </script> <title></title> </head> <body> <form action="" method="post"><!-- formulario carrega a si mesmo com o action vazio --> <div class="ui-widget"> <label for="tags">PN do Item:</label> <input id="tags" type="text" name="nome"/> <br /> <br /> </div> <label>Descri&ccedil;&atilde;o:</label> <input type="text" name="descricao"/> <br /> <br /> <input type="submit" name="cadastrar" value="Cadastrar" /> </form> </body> </html> <?php $con->disconnect(); // fecha conexao com o banco ?>  
    • By odenilson marques
      Bom dia!
       
      Pessoal tenho um formulário com 3 campos input, nos três estou usando o plugin validate da jquery para realizar a validação,
      até aí tudo certo, porém em um desses input, estou usando o autocomplete também da jquery para carregar os dados de uma determinada tabela do BD. 
      No entanto, está ocorrendo um problema, pois quando utilizo, por exemplo a versão jquery.3.1.1.js a validação funciona, porém o autocomplete não, e quando utilizo a versão jquery.js o autocomplete funciona e a validação não. Alguém poderia me uma luz de como chegar a uma solução para esse problema? 
       
      Grato pela atenção!
       
       
       
    • By astolpho
      eu gostaria de saber como posso "desativar" ou "ativar" uma class a partir do php, clicando o botão. 
       
       
       
       
      <!DOCTYPE html>
      <html lang="pt-br">
      <head>
          <meta charset="utf-8">
          <meta name="vieport" content="width=device-widht, initial-scale=1.0">
          <meta http-equiv="X-UA-Comapatible" content="ie=edge">
          <title>Barra de Progesso Oficial</title>
          <style type="text/css">
              
              .container{
                  width: 100%;
              }
              .step-pog-bar{
                  margin-top: 20%;
                  counter-reset: step;
              }
              .step-pog-bar li{
                  list-style: none;
                  float: left;
                  width: 20%;
                  position: relative;
                  text-align: center;
              }
              .step-pog-bar li::before{
                  content: counter(step);
                  counter-increment: step;
                  width: 30px;
                  height: 30px;
                  line-height: 30px;
                  border: 2px solid #ddd;
                  display: block;
                  text-align: center;
                  margin: 0 auto 10px auto;
                  border-radius: 50%;
                  background-color: #fff;
              }
              .step-pog-bar li::after{
                  content: '';
                  position: absolute;
                  top: 15px;
                  left: -50%;
                  border: 2px solid #ddd;
                  width: 100%;
                  z-index: -1;
              }
              
              .step-pog-bar li:first-child::after{
                  content: none;
              }
              .step-pog-bar li.active{
                  color: chartreuse;
              }
              .step-pog-bar li.active::before{
                  border-color: chartreuse;
              }
              .step-pog-bar li.active + li::after{
                  border-color: chartreuse;
              }
              .btn{
                  margin-top: 100px;
                  position: absolute;
                  margin-left: 20%;
              }
              .btn_D{
                  margin-top: 100px;
                  position: absolute;
                  margin-left: 10%;
              }
       
          </style>
      </head>
      <body>
          <div class="btn">
              <input type="submit" value="ativar">
          </div>
          <div class="btn_D">
              <input type="submit" value="Desativar">
          </div>
          <div class="container">
              <ul class="step-pog-bar">
                  <li class="active">Canal Dentario</li>
                  <li class="active">Limpeza</li>
                  <li class="active">Clareamento</li>
                  <li class="active">Escovação</li>
                  <li>Conclusão</li>
              </ul>
          </div>
      </body>
      </html>
×

Important Information

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