Change backgroud from one class to another event

Asked

Viewed 76 times

0

I have the following code:

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

The goal is to leave the line in which the text was focused red.

Result obtained:
inserir a descrição da imagem aqui

Desired result:
inserir a descrição da imagem aqui

When passing the mouse over any element realize that the line is yellow. When clicking on the text I would like the line to be red.


Using Javascript would look like this:

$(".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>

But I would like to do only with CSS, it is possible?

html css

  • can use javascript or it’s just css?

  • @zwitterion css even, if possible.

  • @Jedaiasrodrigues You can change the color of the input, but select an element by "logic" (ie if this element is focus THE RELATIVE GETS red) is complicated javascript free because CSS and logic do not go hand in hand; fiddle here is the selector for the input then with javascript you can add a class onfocus to the relative of the clicked element

  • @Jedaiasrodrigues edited the answer again, take a look

  • @Change your comment into an answer I already accept, and if possible also put an example of alternative structure in which it works will be perfect!

  • Although I’m studying these examples to get a css solution. link1 Link2

  • @Jedaiasrodrigues solved the problem? If yes, mark the answer as a solution, thank you friend

Show 2 more comments

2 answers

1

How to do?

Use JS embedded in the class itself

Explaining

Using the functions onClick, onMouseOver and onMouseOut it is possible to do Hover and Focus without using 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>

Reference: Mouse Events

  • Thank you very much for the answer, but unfortunately it does not meet my problem. I edited the question so that it becomes more clear, if you can help I will be very grateful!

  • I edited the answer, take a look again @Jedaiasrodrigues

  • @Jedaiasrodrigues when passing the mouse, it changes to yellow and when selecting it changes to red, this is not what I was looking for?

  • Victorgomes I think @Jedaias wants you to the Parent input also change color (aka the part that has Lncn)

  • @Victorgomes in my question I would like an entire row of table to change color, ie the :focus of text would change the backgroud-color of another class of elements and not of himself as was placed in his reply.

  • @Jedaiasrodrigues like this ?

  • @Thanks a lot victorgomes even for the help! But unfortunately I would like to use only CSS, it is possible?

  • Why not use JS @Jedaiasrodrigues? This form is so simple...

Show 3 more comments

0

I think it’s gonna be kind of hard without javascript. If you want to use JS this is a possible solution.

//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
});

Note: I changed the name of the class of line-item for line_item. Although it is not a problem, it is good programming practice. Try to delete the text and see what happens.

Browser other questions tagged html css

You are not signed in. Login or sign up in order to post.