0

Tenho o seguinte código:

.line-item:hover td {
  background-color: yellow;
}

.item-text:focus + .line-item td {
  background-color: red !important;
}
<table border="1">
<tr class="line-item">
  <td>L1C1</td>
  <td>L1C2</td>
  <td><input class="item-text" type="text" /></td>
</tr>
<tr class="line-item">
  <td>L2C1</td>
  <td>L2C2</td>
  <td><input class="item-text" type="text" /></td>
</tr>
</table>

O objetivo é deixar a linha em que o text foi focado vermelha.

Resultado obtido:
inserir a descrição da imagem aqui

Resultado desejado:
inserir a descrição da imagem aqui

Ao passar o mouse sobre qualquer elemento perceba que a linha fica amarela. Ao clicar no text eu gostaria que a linha ficasse vermelha.


Usando JavaScript ficaria assim:

$(".item-text").focusin(function(){
		$(this).closest(".line-item").css("background-color", "red");
}).focusout(function(){
	$(this).closest(".line-item").css("background-color", "transparent");
});
.line-item:hover td {
  background-color: yellow;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<table border="1">
<tr class="line-item">
  <td>L1C1</td>
  <td>L1C2</td>
  <td><input class="item-text" type="text" /></td>
</tr>
<tr class="line-item">
  <td>L2C1</td>
  <td>L2C2</td>
  <td><input class="item-text" type="text" /></td>
</tr>
</table>

Mas gostaria de fazer apenas com CSS, é possível?

7
  • pode usar javascript ou é só com css?
    – IgorAlves
    12/04/2016 às 12:43
  • @zwitterion css mesmo, se for possível. 12/04/2016 às 12:50
  • @JedaiasRodrigues Tu consegues mudar a cor do input, mas selecionar um elemento por "logica" (ou seja, se este elemento está focus o PARENTE fica red) é complicado sem javascript porque o CSS e logica não andam de mãos dadas; fiddle aqui está o selector para o input depois com javascript podes adicionar uma class onfocus ao parente do elemento clicado
    – MoshMage
    12/04/2016 às 12:58
  • @JedaiasRodrigues editei a resposta novamente, dê uma olhada 12/04/2016 às 13:14
  • @renan se transformar seu comentário em resposta eu já aceito, e se possível também colocar um exemplo de estrutura alternativa na qual isso funcione ficará perfeito! 12/04/2016 às 13:30

2 Respostas 2

1

Como fazer?

Use JS embutido na própria class

Explicando

Usando as funções onClick, onMouseOver e onMouseOut é possível fazer hover e focus sem usar css.

Code:

<table border="1">
<tr style="cursor:default" onMouseover="javascript:this.style.backgroundColor='#ffff00'" onclick="javascript:this.style.backgroundColor='#ff0000'" onMouseOut="javascript:this.style.backgroundColor=''">
  <td>L1C1</td>
  <td>L1C2</td>
  <td><input class="teste" type="text" /></td>
</tr>
<tr style="cursor:default" onMouseover="javascript:this.style.backgroundColor='#ffff00'" onclick="javascript:this.style.backgroundColor='#ff0000'" onMouseOut="javascript:this.style.backgroundColor=''">
  <td>L2C1</td>
  <td>L2C2</td>
  <td><input class="teste2"" type="text" /></td>
</tr>
</table>

Referencia: Mouse Events

8
  • muito obrigado pela resposta, mas infelizmente ela não atende meu problema. Editei a pergunta pra que ela fique mais clara, se puder ajudar ficarei muito grato! 12/04/2016 às 12:57
  • Editei a resposta, de uma olhada novamente @JedaiasRodrigues 12/04/2016 às 12:58
  • @JedaiasRodrigues ao passar o mouse, ela muda para amarelo e ao selecionar ela muda para vermelho, não era isso que estava querendo? 12/04/2016 às 12:58
  • VictorGomes eu acho que o @Jedaias quer que o parent do input também mude de cor (aka a parte que tem LnCn)
    – MoshMage
    12/04/2016 às 13:00
  • @VictorGomes em minha pergunta eu gostaria que uma linha inteira da tabela mude de cor, ou seja, o :focus do text mudaria o backgroud-color de outra classe de elementos e não dele mesmo como foi colocado em sua resposta. 12/04/2016 às 13:01
0

Eu acho que vai ser meio difícil sem usar javascript. Se vc quiser usar JS essa é uma possível solução.

//HTML
<table border="1">
<tr class="line_item">
  <td>L1C1</td>
  <td>L1C2</td>
  <td><input class="item_text" type="text" /></td>
</tr>
<tr class="line_item">
  <td>L2C1</td>
  <td>L2C2</td>
  <td><input class="item_text" type="text" /></td>
</tr>
</table>

//Js code
$('tr.line_item').on( 'mouseenter', function() {
  $( this ).css({
    'outline': '1px solid #abb3b3',
    'background-color': '#E9E900'
  });
}).on( 'mouseleave', function() {
  $( this ).removeAttr('style');
});

$('.item_text').bind({        
    keyup:function(){
    objectEvent=$(this);

    if(objectEvent.val()!==""){
      //alert(objectEvent.val());
      objectEvent.css({    
            'background-color': '#FF0000'
        });
    }
    else{
        objectEvent.removeAttr('style');
    }
  }//Fim keyUp
});

Nota: Eu mudei o nome da classe de line-item para line_item. Embora não represente um problema, trata-se boas práticas de programação. Tente apagar o texto e veja o que acontece.

Você deve fazer log-in para responder a esta pergunta.

Esta não é a resposta que você está procurando? Pesquise outras perguntas com a tag .