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