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.
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?
focus
o PARENTE ficared
) é complicado sem javascript porque o CSS e logica não andam de mãos dadas; fiddle aqui está o selector para oinput
depois com javascript podes adicionar uma classonfocus
ao parente do elemento clicado