Seletores no Jquery - ao clicar

Front-end

09/11/2015

Como faço para gerar uma mudança visual quando passar o mouse em cima, estou com esse exemplo abaixo, mas fazer essa opção no JQuery.


<html>
	<head>
		<title>Entendendo o JQuery</title>
		<script src="js/jquery-2.1.4.min.js" type="text/javascript"></script>
		<script type="text/javascript">			
			$(document).ready(function() {
				$('tr:not(tr:gt(2))').css('background-color', 'green');
				
			});
		</script>
	</head>
	
	<body>		
		<table border="1" cellpadding="5" cellspacing="0">
			<tr>
				<td>Nome</td>
				<td>Idade</td>
				<td>Endereço</td>
			</tr>
			<tr>
				<td>Diogo</td>
				<td>24</td>
				<td>R Teste</td>
			</tr>
			<tr>
				<td>Sandra</td>
				<td>45</td>
				<td>R test 2</td>
			</tr>
			<tr>
				<td>Gabriel</td>
				<td>34</td>
				<td>R Gabriel</td>
			</tr>
			<tr>
				<td>Gabriel</td>
				<td>34</td>
				<td>R Gabriel</td>
			</tr>
			<tr>
				<td>Gabriel</td>
				<td>34</td>
				<td>R Gabriel</td>
			</tr>
		</table>
	</body>
<html>
Gabriela Monte

Gabriela Monte

Curtidas 0

Melhor post

Jothaz

Jothaz

09/11/2015

Perdoe-me a franqueza, mas me parece que você esta misturando vário conceitos e deixou o post incompreensível.

Afinal você quer anipular no click como esta no título ou ao mover o mouse (hover, mouseover ou mousemove)?

Se for ao passar o mouse sobre um <tr> e alterar a cor de fundo é possível fazer de simplesmente com CSS e nem é preciso usar JQuery:

<style>
#tabela{
width:600px;
height:100px;
text-align:center;
}

.coluna{
width:50px;
height:20px;
}
.coluna:hover{
background-color:#00FF33;
}
</style>

 <table id="tabela" border="1">
  <tr class="coluna">
    <td> </td>
    <td>Cod</td>
    <td>Nome</td>
    <td> Fone </td>
  </tr>
   <tr class="coluna">
    <td>001</td>
    <td> </td>
    <td> </td>
    <td> </td>
  </tr>
   <tr class="coluna">
    <td> </td>
    <td> </td>
    <td> </td>
    <td> </td>
  </tr>
   <tr class="coluna">
    <td> </td>
    <td> </td>
    <td> </td>
    <td> </td>
  </tr>
</table>


Se possível seja mais assertiva no objetivo, pois facilita muito a ajuda.
GOSTEI 1

Mais Respostas

Gabriela Monte

Gabriela Monte

09/11/2015

Misturei a simplicidade do CSS com a "complexidade" do JQuery, mas já que o JQuery faz mudanças nas celulas pensei que poderia existir alguma função.(hover, mouseover ou mousemove).
GOSTEI 0
Jothaz

Jothaz

09/11/2015

Uma das qualidades importante em um profissional de TI é o discernimento para abordar o problema de forma correta com a ferramenta correta. E em TI quanto mais simples uma solução melhor. No caso é possível fazer várias coisas com jQuery e talvez complicar algo que poder ser feito de forma mais simples. E mesmo que você vá usar o jQuery no final para manipular a aparência dos controles você vai ter de usar CSS.

Então o exemplo é só uma forma simples de conseguir alcançar o objetivo.

Agora se o objetivo fosse, por exemplo, criar uma forma de trocar a cor de fundo ao clicar em uma linha de uma table <TR>. Seguindo a seguinte regra: se o fundo fosse diferente de verde ficaria verde e se fosse verde ficaria branco, criando um efeito on/off.
Então não a melhor solução seria o jQuery em conjunto com o CSS.
GOSTEI 0
Gabriela Monte

Gabriela Monte

09/11/2015

Está bem, obrigada Jothaz.
GOSTEI 0
POSTAR