Change backgroud from one class to another event

Question

Change backgroud from one class to another event

Navigation

#1 by (1 votes)
#2 by (0 votes)

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 where text was focused red.

Result obtained:

Desiredoutcome:

Whenyouhoveroveranyelementyounoticethatthelineis Yellow.WhenIclickonthetextIwouldlikethelinetoturnred.

UsingJavaScriptwouldlooklikethis:

$(".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><tableborder="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, is it possible?

html css

asked by anonymous 12.04.2016 / 14:38

2 answers

Filter using stream with class lists that contain lists of other classes Error trying to sum all through a class in Java

score 1 · Answer 1

How to do it?

Use JS embedded in the class itself

Explaining

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

score 0 · Answer 2

I think it's going to be kind of difficult without using 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 class name from line-item to line_item . Although it is not a problem, it is good programming practice. Try deleting the text and see what happens.