Quantcast
Channel: Últimos conteúdos
Viewing all articles
Browse latest Browse all 14190

Mudar Background-color de duas divs jquery

$
0
0

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


Viewing all articles
Browse latest Browse all 14190

Trending Articles